js-13

DOM编程

DOM对象模型

什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

DOM树：

DOM树是结构
所谓层级结构是指元素和元素之间的关系
父子，兄弟
解析器输出的树是由DOM元素和属性节点组成的
当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。
脱离文档流后层级结构关系还是没有变的

Node节点

nodeType:显示节点的类型nodeName:显示节点的名称nodeValue:显示节点的值attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的下一个节点
previousSibling:紧挨着当前节点的上一个节点

访问Node节点

document.getElementById(id);
返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);
返回带有指定名称的节点集合
document.getElementsByTagName(tagname);
返回带有指定标签名的对象集合
document.getElementsByClassName(classname);
返回带有指定class名称的对象集合

querySelector() 通过CSS选择器的方式查找指定元素，返回满足条件的第一个元素

querySelectorAll() 通过CSS选择器的方式查找指定元素，返回满足条件的所有元素

访问元素属性

• 通过element.属性名访问
• 通过element[属性名]访问（可使用变量)