DOM常见属性及用法

1：innerHTML、outerHTML、innerText、outerText

innerHTML: 设置或获取位于对象起始和结束标签内的HTML。

outerHTML: 设置或获取对象及其内容的HTML。

innerText: 设置或获取位于对象起始和结束标签内的文本。

outerText: 设置（包括标签）或获取（不包括标签）对象的文本。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM</title>

</head>

<body>

    <ul id="test">

        <li><i>点击1</i></li>

        <li>点击2</li>

        <li>点击3</li>

        <li>点击4</li>

    </ul>

    <script type="text/javascript">

        var test = document.getElementById('test');

    var lis = test.getElementsByTagName('li');

    var handlers = function (nodes) {

        var i;

        for (i = 0; i < nodes.length; i += 1) {

            nodes[i].onclick = function(){

                console.log(this.innerHTML);

                console.log(this.outerHTML);

                console.log(this.innerText);

                console.log(this.outerText);

            }

        }

    };

    handlers(lis);

#results

//<i>点击1</i>

//<li><i>点击1</i></li>

//点击1

//点击1

    </script>

</body>

</html>

特别说明：
　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。

2:Javascript中取得某个元素的方法有：

getElementById('节点id')、getElementsByTagName('标签名')、getElementByName('name属性值')；

3：添加、移除、创建元素、复制节点和查找节点以及判断节点类型：

添加：appendChild(newNode)向节点最后添加一个子节点。也可以从一个元素向另一个元素移动元素。参见http://www.w3school.com.cn/jsref/

移除：removeChild(node) 从元素中移除指定的子节点。

创建：creatElement(tagName)创建元素节点。此方法返回一个Element对象。

复制：node.cloneNode(deep)创建节点的拷贝，并返回该副本。deep为布尔值，默认为false，此时克隆节点的所有属性以及他们的值。设置为true时，克隆节点及其属性，以及所有后代。

巴特西

DOM常见属性及用法

最新文章

热门文章