通常我们操作一个元素节点前都需要查找到这个元素,查找到这个元素有两种方式。
- 使用选择器函数查找元素
- 通过元素的关系属性来查找元素
使用选择器函数查找getElementById
通过节点元素的ID得到此节点
getElementById id选择器 boxDiv boxDiv var box = document.getElementById('box'); var boxDiv = document.getElementById('boxDiv'); console.log("box:", box); console.log("boxDiv:", boxDiv);上面的例子中,id = ”boxDiv“ 有重复,在HTML的规则中, ID在一个网页应当是唯一的,如果重复, documen.getElementById 方法也只会获取第一个。
getElementsByName
通过名称获得节点, 返回的是一个数组集合
Document const up_names = document.getElementsByName("up"); console.log(up_names);
getElementByTagName
通过标签名得到一组标签数组
注意:此方法返回的是数组,即使页面上只有一个此节点的元素
getElementByTagName 哈喽,第一 哈喽,第二 哈喽,第三 哈喽,第四 段落
段落
段落
段落
// 得到一个div标签的数据 var divS = document.getElementsByTagName('div'); console.log(divS); var divBox = document.getElementById('divBox'); var pArray = divBox.getElementsByTagName('p'); console.log(pArray);getElementByClassName
通过class选择器得到元素节点的数组
getElementByIdElementByClassName box1节点一
box1节点二
box1节点三
box1节点四
box2节点2
box2节点二
box2节点三
box2节点四
// 会获取到所有 包含 class = child 的元素 var child = document.getElementsByClassName('child'); console.log('child:',child); var box1 = document.getElementById('box1'); // 获取 id 为 box1 下的所有 class = box2Child 的子元素 var box1Children = box1.getElementsByClassName('box1Child'); console.log('box1Children:',box1Children);querySelector
通过选择器或者选择器组得到元素节点,只能得到页面上的一个元素,如果有多个元素符合条件,则只能得到第一个元素
querySelector 子元素
子元素1
子元素2
// querySelector 多个元素只会获得第一个 var child = document.querySelector('#box1 .child'); console.log('child:', child);querySelectoryAll
通过选择器或者选择器组得到数组元素
注:返回值是一个数组
querySelector 子元素
子元素1
子元素2
// 根据元素选择器获取所有的子元素 var children = document.querySelectorAll('#box1 .child'); console.log('children:', children);方法 功能 getElmentById 通过ID得到元素 getElementsByName 通过名称得到元素 getElementByTagName 通过标签名得到元素数组 getElementByClassName 通过类名得到元素数组 querySelector 通过选择器得到元素 querySelectoryAll 通过选择器得到元素数组
关系属性查找元素
关系属性查找,是根据已知的节点去查找我们想要的节点
节点和节点组成了一棵树,有以下几种角色
父节点:在一个嵌套结构中,外层的被成为内层节点的父节点
子节点:嵌套在父节点内部的节点
兄弟节点:处在同一层级,并列的节点被称为兄弟节点
这些角色之间有以下几种关系,我们就可以用这些关系属性获取相应的元素节点
关系 所有节点 子节点 childNodes 父节点 parentNode 第一个子节点 firstChild 最后一个子节点 lastChild 前一个兄弟节点 previousSibling 后一个兄弟节点 nextSlibling
拓展
DOM中,文本和空白也应该算DOM的节点, 所以用上述表格中的属性取的是所有的节点
在日常开发中,我们可能只需要操作元素节点(带标签的)的节点, 因此,有了以下属性方便我们操作
关系 元素节点 子节点 children 第一个子节点 firstElementChild 最后一个子节点 lastElementChild 前一个兄弟节点 previousElementSibling 后一个兄弟节点 nextElementSibling
节点关系 文字文字
文字文字
文字文字
var divBox = document.getElementById('divBox'); // 打印所有子节点 (包含空文本等也算一个节点) console.log(divBox.childNodes); // 打印所有元素节点(从IE9开始兼容) console.log(divBox.children); // 打印父节点 var secondP = document.querySelector('.secondP'); console.log('secondP:', secondP.parentNode); // 第一个子节点 var firstChild = divBox.firstChild; console.log('第一个子节点:', firstChild); // 第一个子元素节点 var firstElementChild = divBox.firstElementChild; console.log('第一个子元素节点:', firstElementChild); // 最后一个子节点 var lastChild = divBox.lastChild; console.log('最后一个子节点:', lastChild); // 最后一个元素节点 var lastElementChild = divBox.lastElementChild; console.log('最后一个元素节点:', lastElementChild); // 前一个兄弟节点 如果没有返回null var previousSibling = secondP.previousSibling; console.log('前一个兄弟节点:', previousSibling); // 前一个兄弟元素节点, 如果没有返回null var previousElementSibling = secondP.previousElementSibling; console.log('前一个兄弟元素节点:', previousElementSibling); // 后一个兄弟节点, 如果没有返回null var nextSibling = secondP.nextSibling; console.log('后一个兄弟节点:', nextSibling); // 后一个兄弟元素节点 , 如果没有返回null var nextElementSibling = secondP.nextElementSibling; console.log('后一个兄弟元素节点:', nextElementSibling);上面获取元素节点的方法兼容到IE9, 其实我们可以使用前面文章中提到的 nodeType 来模拟实现 这些方法,这种写法可以兼容到IE6
我们知道 nodeType = 1 的为元素节点,因此我们通过方法模拟实现类似children属性的功能, 获取一个元素的所有子节点
以下为实现代码
文字文字
文字文字
文字文字
var divBox = document.getElementById('divBox'); function getChildren(node) { // 结果数组 var children = []; // 遍历node这个节点的所有子节点,判断每一个子节点的nodeType属性是不是1 // 如果时1 , 就推入数组 for(var i = 0 ; i < node.childNodes.length; i++) { if(node.childNodes[i].nodeType == 1) { children.push(node.childNodes[i]); } } return children; } console.log(getChildren(divBox)); .zstitle { width: 280px; text-align: center; font-size: 26px } .zsimgweixin { width: 280px } .zsimgali { width: 280px; padding: 0px 0px 50px 0px } .zsleft { float: left } .zsdiv { display: flex } .zs { font-size: 30px } .zspaddingright { padding: 0px 100px 0px 0px } 请关于一下啦^_^
微信公众号