JavaScript DOM 元素查找

DOM 操作流程

查找元素

　　- 直接获取

　　- 按关系查找

　　- 按 HTML 查找

　　- 按选择器查找

直接获取

　　DOM中不需要查找可以直接获取的节点：

　　　　- document：document

　　　　- html：document.documElement

　　　　- head：document.head

　　　　- body：document.body

//直接获取
console.log(document)  // document
console.log(document.documentElement)  // html
console.log(document.head) // head
console.log(document.body)  // body

扫描二维码关注公众号，回复： 9521669 查看本文章

按节点间的关系查找

　　Node 类型中定义了节点树中所有节点彼此间关系属性。

　　　　- 父节点（parent node）

　　　　- 子节点（child node）

　　　　- 兄弟节点（sibling）

节点树的节点彼此拥有层级关系，Node类型使用如下属性关联节点树上的内阁节点对象：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Tree</title>
</head>
<body>

<span>hello</span>
<h1>标题一</h1>
<ul>
    <li><a>查看全部</a></li>
</ul>

<script src="mJS.js"></script>

</body>
</html>

JavaScript

// 按节点关系查找
// parentNode 父节点
// childNodes 父节点集合
// firstNode 第一个子节点
// lastNode 最后一个子节点
// previousSibling 前一个兄弟节点
// nextSilbing 下一个兄弟节点

//查看body的父节点
console.log(document.body.parentNode) // html
//查看HTML的直接子节点
console.log(document.documentElement.childNodes) // 类数组集合
console.log(document.documentElement.childNodes[0]) //
console.log(document.documentElement.childNodes[1]) //
console.log(document.documentElement.childNodes[2]) //


// 查看 body 的直接子节点
console.log(document.body.childNodes)

// 查看body下的span
console.log(document.body.firstChild.nextSibling)

// 从body访问head
console.log(document.body.previousSibling.previousSibling)

按元素间关系查找

　　仅包含元素节点不包含文字节点的树结构，我们称之为元素树。

　　元素树不是一颗新的树，仅是节点树中所有元素节点组成的子集。

　　通过元素树选取元素，可以吧空字符节点和文本节点忽略掉，只选取元素节点。

通过元素树来选取元素，他和节点树的属性是一一对应的

html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Tree</title>

</head>
<body>

<span>hello</span>
<h1>标题一</h1>
<ul>
    <li><a>查看全部</a></li>
</ul>


<script src="mJS.js"></script>

</body>
</html>

JavaScript

// 按元素关系查找
// parentElement 父元素
// children 子元素集合
// firstElementChild 第一个子元素
// lastElementChild 最后一个子元素
// previousElementSibling 前一个兄弟元素
// nextElementSilbing 下一个兄弟元素

//查看body的父元素
console.log(document.body.parentElement) // html
//查看HTML的直接子元素
console.log(document.documentElement.children) // 类数组集合
console.log(document.documentElement.children[0]) //
console.log(document.documentElement.children[1]) //


// 查看 body 的直接子元素
console.log(document.body.children)

// 查看body下的span
console.log(document.body.firstElementChild)

// 从body访问head
console.log(document.body.previousElementSibling)

按 HTML 查找

　　按 HTML 查找元素，可以快速的定位到目标元素上。

　　四种方式：

　　　　- 按 id 查找

　　　　- 按 name 查找

　　　　- 按标签名查找

　　　　- 按 class 查找

按 id 查找

　　可查找具有某个 id 属性的元素。

　　　　- document.getElementById(" id 值 ")；

　　返回一个元素对象。

　　如果没有找到，返回 null。

　　只能在 document 上调用。

按 name 查找

　　可查找具有某个 name 属性值得元素，用于表单元素和具有 name 属性的锚点元素。

　　　　- document.getElementsByName(" name 值 ")；

　　返回一个动态元素集合。

　　如果没有找到，则返回空集合。

　　只能在 document 上调用。

按标签名查找

　　可查找某个父元素下，具有指定标签名的后代元素。

　　　　- parent.getElementsByTagName(" 标签名 ")；

　　返回一个动态元素集合。

　　如果没有找到，返回空集合。

　　可在任意父元素上调用。

按 class 查找

　　可查找某个父元素下，具有指定 class 属性值得后代元素。

　　　　- parent.getElementsByClassName(" class 名 ")

　　返回一个动态的元素集合。

　　如果没找到，返回空集合。

　　可在任意父元素上调用。

代码案例

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Tree</title>

</head>
<body>
<span>Hello Word!</span>
<ul id="nav">
    <li>电影</li>
    <li>综艺
        <ul id="subnav">
            <li class="hot active">跑男</li>
            <li>奇葩说</li>
        </ul> 
    </li>
    <li>电视剧</li>
</ul>
<div class="active">
    <input name="gender" type="radio">男
    <input name="gender" type="radio">女
</div>


<script src="mJS.js"></script>

</body>
</html>

JavaScript

/* 按 HTML 查找
document.getElementById("id")
document.getElementsByName("name")
parent.getElementsByTagName("tagName")
parent.getElementsByClassName("class")
*/

// 查找id为nav的元素
console.log(document.getElementById("nav"));
// 查找id为n的元素 ，没有输出为 null
console.log(document.getElementById("n"));

// 查找name 为 gender的元素
console.log(document.getElementsByName("gender"))
console.log(document.getElementsByName("gender")[0])
console.log(document.getElementsByName("gender").length)


// 查找所有的 li 元素
console.log(document.getElementsByTagName("li"))
// 查找 id 为subnav 下所有的的li
console.log(document.getElementById("subnav").getElementsByTagName("li"))

var subnav = document.getElementById("subnav")
var subli = subnav.getElementsByTagName("li")
console.log(subli)

// 查找所有class为 active 的元素
console.log(document.getElementsByClassName("active"))
console.log(document.getElementsByClassName("a"))

元素遍历

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Tree</title>

</head>
<body>
<span>Hello Word!</span>
<ul id="nav">
    <li>电影</li>
    <li>综艺
        <ul id="subnav">
            <li class="hot active">跑男</li>
            <li>奇葩说</li>
        </ul> 
    </li>
    <li>电视剧</li>
</ul>
<div class="active">
    <input name="gender" type="radio">男
    <input name="gender" type="radio">女
</div>


<script src="mJS.js"></script>

</body>
</html>

JavaScript

// 遍历所有的 li 元素
var lis = document.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i])
}

如何遍历

遍历代码优化：

// 遍历所有的 li 元素
var lis = document.getElementsByTagName("li")
for (var i = 0, len = lis.length; i < len; i++) {
    console.log(lis[i])
}

实现显示和隐藏

HTML

<style>
    .show{
        display: block ;
    }
    .hide{
        display: none;
    }
</style>
<div id="tree">
    <h3>考勤管理</h3>
    <ul>
        <li>日常考勤</li>
        <li>请假申请</li>
        <li>加班/出差</li>
    </ul>
</div>

操作流程

案例代码

HTML

<style>
    .show{
        display: block ;
    }
    .hide{
        display: none;
    }
</style>


<div id="tree">
    <h3>考勤管理</h3>
    <ul>
        <li>日常考勤</li>
        <li>请假申请</li>
        <li>加班/出差</li>
    </ul>
</div>

JavaScript

// 1.构建 DOM 树
// 2.查找触发事件的元素
var tree = document.getElementById("tree");
var h3 = tree.firstElementChild;
console.log(h3)
// 3.绑定事件  elem.onclick = function(){/* 处理程序 */}
h3.onclick = function () {
    // 4.查找要修改的元素
    var ul = h3.nextElementSibling;
    // 5.修改 获取或修改 class ： elem.className = 新值
    if (ul.className == "show" || ul.className == "") {
        ul.className = "hide"; // 改为 隐藏
    } else {
        ul.className = "show"; // 改为 显示
    }

}

安选择器查找

可以按 css 的选择器查找，查找父元素下的后代元素。

　　- parent.querySelector(" selector ");

　　- 返回匹配到的第一个元素。

　　- parent.querySelectorAll(" selector ");

　　- 返回一个非动态元素集合。

　　- 若没找到，返回空集合。

案例

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*修改calss为active的li元素的背景颜色*/
    li.active{ background: lightblue;}

    </style>
  </head>
  <body>
    <span>Hello World!</span>
    <ul>
      <li class="active"></li>
    </ul>
    <ul id="nav">
      <li>电影</li>
      <li>综艺
          <ul id="subnav">
            <li class="hot active">跑男</li>
            <li>奇葩说</li>
          </ul>
      </li>
      <li>电视剧</li>
    </ul>
    <div class="active">
      <input type="radio" name="gender"> 男
      <input type="radio" name="gender"> 女
    </div>
    <input type="text" value="请输入用户名">

    <script src="01.js"></script>




  </body>
</html>

JavaScript

//查找所有class为active的li元素
console.log(document.getElementsByTagName("li"));//li
console.log(document.getElementsByClassName("active"));//active
console.log(document.querySelector("li.active"))
console.log(document.querySelectorAll("li.active"))

完成！辛苦了！

JayveeWong

发布了118 篇原创文章 · 获赞 123 · 访问量 6万+

私信关注