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[属性名]访问(可使用变量)