1.DOM — > Document Object Model
2.DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
1.对节点的增删改查
查
查看元素节点
document代表整个文档
document.getElementById() //元素id 在Ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
.getElementsByTagName() // 标签名
.getElementsByName(); //,IE不支持需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
.getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起
.querySelector() // css选择器 在ie7和ie7以下的版本中没有
.querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有
查
查看元素节点
document代表整个文档
document.getElementById() //元素id 在Ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
.getElementsByTagName() // 标签名
.getElementsByName(); //,IE不支持需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
.getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起
.querySelector() // css选择器 在ie7和ie7以下的版本中没有
.querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有
1.getElementById方法定义在Document.prototype上,即Element节点上不能使用。
2.getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(xml document,Element)
3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
5.Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代<html>元素
6.getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义
parentNode -> 父节点 (最顶端的parentNode为#document);
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点
parentElement -> 返回当前元素的父元素节点 (IE不兼容)
children -> 只返回当前元素的元素子节点
node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)
firstElementChild -> 返回的是第一个元素节点(IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点(IE不兼容)
节点的类型
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType
节点的四个属性nodeName
元素的标签名,以大写形式表示,只读
nodeValue
Text节点或Comment节点的文本内容,可读写
nodeType
该节点的类型,只读
attributes
Element 节点的属性集合
节点的一个方法 Node.hasChildNodes();
<body>
<div>
123
<!--this is comment-->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var divjiedian = document.getElementsByTagName('div')[0];
function retElementChild(jiedian) {
var temp = {
length : 0,
push : Array.prototype.push,
splice : Array.prototype.splice,
},
child = jiedian.childNodes;
len = child.length;
for(var i = 0; i < len; i++) {
if(child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp;
}
console.log(retElementChild(divjiedian));
</script>
</body>
document-->HTMLDocument-->Document-->Node-->EventTarget-->Object