# 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>
    <div id="box">id选择器</div>
    <div id="boxDiv">boxDiv</div>
    <div id="boxDiv">boxDiv</div>

    <script>
        var box = document.getElementById('box');
        var boxDiv = document.getElementById('boxDiv');
        console.log("box:", box);
        console.log("boxDiv:", boxDiv);
</script>
</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" />

    <script>
        const up_names = document.getElementsByName("up");
        console.log(up_names);
</script>
</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>
    <div>哈喽，第一</div>
    <div>哈喽，第二</div>
    <div>哈喽，第三</div>
    <div>哈喽，第四</div>

    <div id="divBox">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

    <script>
        // 得到一个div标签的数据
        var divS = document.getElementsByTagName('div');
        console.log(divS);

        var divBox = document.getElementById('divBox');
        var pArray = divBox.getElementsByTagName('p');
        console.log(pArray);
</script>
</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>

    <div id="box1">
        <p class="child box1Child">box1节点一</p>
        <p class="child box1Child">box1节点二</p>
        <p class="child box1Child">box1节点三</p>
        <p class="child box1Child">box1节点四</p>
    </div>
    <div id="box2">
        <p class="child box2Child">box2节点2</p>
        <p class="child box2Child">box2节点二</p>
        <p class="child box2Child">box2节点三</p>
        <p class="child box2Child">box2节点四</p>
    </div>
    <script>
        
        // 会获取到所有 包含 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);
</script>
</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>
    <div id="box1">
        <p>子元素</p>
        <p class="child">子元素1</p>
        <p class="child">子元素2</p>
    </div>

    <script>
        // querySelector 多个元素只会获得第一个
        var child = document.querySelector('#box1 .child');
        console.log('child:', child);
</script>
</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>
    <div id="box1">
        <p>子元素</p>
        <p class="child">子元素1</p>
        <p class="child">子元素2</p>
    </div>

    <script>
       
        // 根据元素选择器获取所有的子元素
        var children = document.querySelectorAll('#box1 .child');
        console.log('children:', children);
</script>
</body>
</html>

方法	功能
getElmentById	通过ID得到元素
getElementsByName	通过名称得到元素
getElementByTagName	通过标签名得到元素数组
getElementByClassName	通过类名得到元素数组
querySelector	通过选择器得到元素
querySelectoryAll	通过选择器得到元素数组

# 关系属性查找元素

关系属性查找，是根据已知的节点去查找我们想要的节点

节点和节点组成了一棵树，有以下几种角色

父节点：在一个嵌套结构中，外层的被成为内层节点的父节点

子节点：嵌套在父节点内部的节点

兄弟节点：处在同一层级，并列的节点被称为兄弟节点

<!--id为parentNode被称为父节点-->
<div id='parentNode'>
  <!--子节点-->
  <div></div>
  <div></div>
</div>
<!--parentNode2 和 parentNode 并列，称为兄弟节点 -->
<div id='parentNode2'>
<div>

这些角色之间有以下几种关系，我们就可以用这些关系属性获取相应的元素节点

关系	所有节点
子节点	childNodes
父节点	parentNode
第一个子节点	firstChild
最后一个子节点	lastChild
前一个兄弟节点	previousSibling
后一个兄弟节点	nextSlibling

Untitled

# 拓展

DOM中，文本和空白也应该算DOM的节点, 所以用上述表格中的属性取的是所有的节点

在日常开发中，我们可能只需要操作元素节点（带标签的）的节点，因此，有了以下属性方便我们操作

关系	元素节点
子节点	children
第一个子节点	firstElementChild
最后一个子节点	lastElementChild
前一个兄弟节点	previousElementSibling
后一个兄弟节点	nextElementSibling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点关系</title>
</head>
<body>
    
    <div id="divBox">
        <p>文字文字</p>
        <p class="secondP">文字文字</p>
        <p>文字文字</p>
    </div>
    <script>
        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);
</script>
</body>
</html>

上面获取元素节点的方法兼容到IE9，其实我们可以使用前面文章中提到的 nodeType 来模拟实现这些方法，这种写法可以兼容到IE6

我们知道 nodeType = 1 的为元素节点，因此我们通过方法模拟实现类似children属性的功能，获取一个元素的所有子节点

以下为实现代码

<div id="divBox">
        <p>文字文字</p>
        <p class="secondP">文字文字</p>
        <p>文字文字</p>
    </div>
    <script>
        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));
</script>

← 什么是DOM? DOM元素之更改 →