DOM简介及查询

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 模型被构造为对象的树
在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

node.getElementById(“id”)__通过 id 查找 HTML 元素
实例：
在这里插入图片描述

node.getElementsByTagName(“TagName”)__通过标签名查找一组 HTML 元素
注意，这个方法给我们返回一个类数组对象，所有查找到的元素都会封装到对象中
实例：
在这里插入图片描述
node.getElementsByName(“Name”)__通过name属性查找一组 HTML 元素
注意，这个方法也是返回一个类数组

获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByName（）
-方法，返回当前节点的指定标签名后代节点
在这里插入图片描述

2.childNodes
-属性，表示当前节点的所有子节点
但是注意：childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签标签间空白处也会当成文本节点（IE8及以下浏览器中，不会将空白文本当做子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个）
在这里插入图片描述
另外补充一点，可以使用children属性，可以获取当前元素的所有子元素

3.firstChild
-属性，表示当前节点的第一个子节点（包括空白文本节点）
在这里插入图片描述

弹出undefined是因为获取到的是：父节点ul跟子节点li之间的空白文本节点！
如果想不删掉空白文本节点，可以使用firstElementChild（不兼容IE8及以下浏览器）来获取当前元素的第一个子节点

4.lastChild
-属性，表示当前节点的最后一个子节点（跟firstChild一样，也包括空白文本节点）

获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling
-属性，表示当前节点的前一个兄弟节点
3.nextSibling
-属性，表示当前节点的后一个兄弟节点

DOM查询的其他方法
1.在document中有一个属性body，它保存的是body的引用

var body = document.body;

2.document.documentElement保存的是html根标签

var html = document.documentElement;

3.document.all代表页面中所有元素

var all = document.all;

4_①.根据元素的class属性值来查询一组元素节点对象
getElementsByClassName（）可以根据class属性值获取一组元素节点对象，不支持IE8及以下浏览器

var box = document.getElementsByClassName（"box"）;

4_②.虽然IE8中没有getElementsByClassName（）但是可以使用querySelector（）代替
document.queryselector（）

需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
缺点是该方法总会返回一个唯一的一个元素，如果满足条件的元素多个，那么它只会返回第一个！

var div = document.querySeletor（".box1 div"）;

var box1 = document.querySeletor（".box1"）;

4_③document.querySeletorAll（）

该方法和querySeletor（）类似，不同的是它会将符合条件的元素封装到一个数组中返回，即时符合条件的只有一个，他也会返回数组

var box2 = document.querySeletorAll（".box2"）；

猜你喜欢