《JavaScript视频16》DOM查询

最新推荐文章于 2024-04-19 11:48:06 发布

原创最新推荐文章于 2024-04-19 11:48:06 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了DOM（文档对象模型）中的元素节点操作，包括通过getElementsByTagName(), childNodes, children等属性获取子节点，以及使用parentNode, previousSibling, nextSibling获取父节点和兄弟节点。还提到了innerText用于获取元素文本内容，以及checked属性在处理多选框选中状态时的应用。此外，文章讨论了如何在事件响应函数中使用this，并提及了document对象的body, html, all属性。对于元素的查询，文章提到了getElementByClassName()（不支持IE8）和querySelector(), querySelectorAll()方法，特别指出querySelector()返回第一个匹配元素，而querySelectorAll()返回所有匹配元素的数组。

通过document调用可以获取元素节点

通过具体的元素节点的调用，可以获取元素节点的子节点：

getElementsByTagName() 方法
childNodes属性：返回包括文本节点在内的所有子节点
children属性：可以获取当前元素的所有子元素
firstChild属性：当前元素的第一个子节点
lastChild属性：当前元素的最后一个子节点

根据DOM标准，标签中的空白也会当成文本节点，但是在IE8及以下不会。

获取父节点和兄弟节点：

parentNode属性：当前节点的父节点
previousSibling属性：当前节点的前一个兄弟节点
nextSibling属性：后一个兄弟节点

innerText 可以获取到元素内部的文本内容

节点的属性：

在这里插入图片描述

checked

checked属性可以来获取或者设置多选框的选中状态

checkboxObject.checked = true/false

在事件的响应函数中，响应函数给谁绑定的this就是谁：

var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
	for(var i=0; i<items.length; i++){
		items[i].checked = this.checked;
	}
}

document的三个属性

var body = document.body;
var html = document.documentElement;
var all = document.all;

根据元素的class属性值查询一组元素节点对象：
getElementByClassName()属性，但是IE8以下不支持

document.querySelector()

document.querySelector()需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点的对象

var div = document.querySelector(".box1 div");

使用该方法只会返回唯一的一个元素，如果满足条件的元素有多个，则只返回第一个。

这个方法支持IE8

document.querySelectorAll()这个方法和上面一个类似，不同的是它会将所有复合条件的元素封装到一个数组中返回。