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);
console.log('第一次' ,box2.length);
var newChild = document.createElement('div' );
newChild.innerHTML = '4' ;
father.appendChild(newChild);
console.log('第二次' ,box1.length);
console.log('第二次' ,box2.length);
</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('属性名',值)
修改属性值。