DOM操作总结

来源：互联网发布：输入网络凭据编辑：程序博客网时间：2024/05/25 23:57

DOM操作总结

初识DOM

DOM是在ECMAScript基础上添加的提供访问和操作网页内容的方法和接口。可操作HTML中的标签内容、样式、结构。

基本选择器

ID选择器：

    1.getElementById('ID')    2.直接使用ID名称选择（浏览器会将ID挂在载window对象上，因此在构建页面时，应该少用ID。这种选择方法存在兼容问题）

var box1 = document.getElementById('box');var box2 = box;

标签选择器：

    1.getElementsByTagName('标签名')

Name选择器：

    1.getElementsByName('Name')

类选择器：

    1.getElementsByClassName('类名')（存在兼容性问题）

综合选择器：

    1.querySelector('CSS选择器')        选择对应元素的第一个，结果为一个元素。    2.querySelectorAll('CSS选择器')        选择对应元素的所有，结果为数组。

综合群组选择器与其他群组选择器的区别：

<body>        <div id="father">            <div>1</div>            <div>2</div>            <div>3</div>        </div>        <script type="text/javascript">            //通过两种方法选择元素            var box1 = father.getElementsByTagName('div');            var box2 = father.querySelectorAll('div');            console.log('第一次',box1.length);//输出3            console.log('第一次',box2.length);//输出3            //添加元素            var newChild = document.createElement('div');            newChild.innerHTML = '4';            father.appendChild(newChild);            console.log('第二次',box1.length);//输出4            console.log('第二次',box2.length);//输出3        </script>    </body>

被综合群组选择器选出的元素为NodeList集合，而被其他群组选择器选出的为HTMLCollection集合。具体差别见：

http://www.cnblogs.com/summerTea/p/4943533.html

被综合群组选择器选中的元素形成的变量并不会受到其他DOM操作的影响。而被其他群组选择器选中的元素形成的变量会与真实的DOM节点形成引用关系，操作DOM时会同时修改该变量。

基本DOM操作

创建元素

createElement('标签名称')    创建一个元素到内存。

添加元素

1.父节点.appendChild(元素节点)    在父节点最后插入新节点。2.父节点.insertBefore(要插入的节点，已存在的节点)    在所选节点前插入新节点。

删除元素

父元素.removeChild(元素节点)    在父元素中删除对应子元素。

替换元素

父元素.replaceChild(新元素，旧元素)    在父元素中用新元素替换旧元素。

添加内容或元素

元素.innerHtml=''    在父元素中添加内容或元素。

获取自定义属性值

元素.getAttribute('属性名')    获取属性值。

修改自定义属性值

元素.setAttribute('属性名',值)    修改属性值。

0 0