DOM操作之元素查找
通常我们操作一个元素节点前都需要查找到这个元素，查找到这个元素有两种方式。[*]使用选择器函数查找元素
[*]通过元素的关系属性来查找元素
使用选择器函数查找
getElementById
通过节点元素的ID得到此节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementById</title>
</head>
<body>
id选择器
boxDiv
boxDiv
</body>
</html>上面的例子中，id = ”boxDiv“ 有重复，在HTML的规则中， ID在一个网页应当是唯一的，如果重复， documen.getElementById 方法也只会获取第一个。
getElementsByName
通过名称获得节点， 返回的是一个数组集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="hidden" name="up" />
<input type="hidden" name="down" />
</body>
</html>getElementByTagName
通过标签名得到一组标签数组
注意：此方法返回的是数组，即使页面上只有一个此节点的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementByTagName</title>
</head>
<body>
哈喽，第一
哈喽，第二
哈喽，第三
哈喽，第四
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
</html>getElementByClassName
通过class选择器得到元素节点的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementByIdElementByClassName</title>
</head>
<body>
<p >box1节点一</p>
<p >box1节点二</p>
<p >box1节点三</p>
<p >box1节点四</p>
<p >box2节点2</p>
<p >box2节点二</p>
<p >box2节点三</p>
<p >box2节点四</p>
</body>
</html>querySelector
通过选择器或者选择器组得到元素节点，只能得到页面上的一个元素，如果有多个元素符合条件，则只能得到第一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector</title>
</head>
<body>
<p>子元素</p>
<p >子元素1</p>
<p >子元素2</p>
</body>
</html>querySelectoryAll
通过选择器或者选择器组得到数组元素
注：返回值是一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector</title>
</head>
<body>
<p>子元素</p>
<p >子元素1</p>
<p >子元素2</p>
</body>
</html>方法功能getElmentById通过ID得到元素getElementsByName通过名称得到元素getElementByTagName通过标签名得到元素数组getElementByClassName通过类名得到元素数组querySelector通过选择器得到元素querySelectoryAll通过选择器得到元素数组关系属性查找元素
关系属性查找，是根据已知的节点去查找我们想要的节点
节点和节点组成了一棵树，有以下几种角色
父节点：在一个嵌套结构中，外层的被成为内层节点的父节点
子节点：嵌套在父节点内部的节点
兄弟节点：处在同一层级，并列的节点被称为兄弟节点
这些角色之间有以下几种关系，我们就可以用这些关系属性获取相应的元素节点
关系所有节点子节点childNodes父节点parentNode第一个子节点firstChild最后一个子节点lastChild前一个兄弟节点previousSibling后一个兄弟节点nextSlibling
拓展
DOM中，文本和空白也应该算DOM的节点, 所以用上述表格中的属性取的是所有的节点
在日常开发中，我们可能只需要操作元素节点（带标签的）的节点， 因此，有了以下属性方便我们操作
关系元素节点子节点children第一个子节点firstElementChild最后一个子节点lastElementChild前一个兄弟节点previousElementSibling后一个兄弟节点nextElementSibling
节点关系
文字文字
文字文字
文字文字
上面获取元素节点的方法兼容到IE9， 其实我们可以使用前面文章中提到的 nodeType 来模拟实现 这些方法，这种写法可以兼容到IE6
我们知道 nodeType = 1 的为元素节点，因此我们通过方法模拟实现类似children属性的功能， 获取一个元素的所有子节点
以下为实现代码
文字文字
文字文字
文字文字
微信公众号
来源:https://www.cnblogs.com/haloujava/p/17927882.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]