0022 JS 之标签查找

目录

1、选择器-- 直接查找

1 cs代码中查找标签是为了给一个或者N个标签添加样式
2 js 代码中查找标签是为了给标签 绑定事件，一般是js的函数

3 js和html之间进行数据交互通过页面对象document对象 内连接 标签的属性，把js事件函数绑定到标签的单击触发的属性上。
（可以理解成 js 的逻辑代码运算的值要赋值给 标签的value值 ）

4 document对象直接链接标签属性分为 id，class，标签名，除id返回的是标签对象
 class和标签分别是数组，数组内的元素是dom对象
 
 
5、数组取值根据 索引进行取值，获取document的属性值

image-20230313162627080

image-20230313163058747

 总结cs装饰html，js通过document和html交互数据，html的form和后台交互数据。

2、导航器后代查找 ，子代查找 兄弟查找 ，父级查找

平级的class和标签名的数组根据索引获取，html父子层级关系，document对象等于html对象，那么每一个在html下的标签也是一个对象，只不过要从document对象中提取出来， 数组内的元素，在去找它的子标签，在去获取子标签的对象。类似递归查询。

6使用直接查找一般是确定标签的参照物，根据dom对象的属性再去去查找它的父标签，兄弟标签，所有子标签和子标签的第一个和最后一个，除了所有的子标签是一个数组外，其他返回的均是标签对象，就可以根据参照点继续延伸寻找。


<body>


<div>
    <div class="c2">
        <div class="c3">
            <div class="c4">
                <li class="c5" id = 'd1'>123</li>
                <li class="c6" id = 'd2'>234</li>
                <li class="c7" id = 'd3'>456</li>
            </div>
        </div>
    </div>
</div>
<script>

// 导航查找 通过class
var c5 = document.getElementsByClassName('c5')[0]
console.log(c5)
// 父级标签 
c5.parentElement  

// 所有的子代标签
c5.children

// 第一个子代标签
c5.firstElementChild
// 最后一个子代标签
c5.lastElementChild

// 下一个兄弟标签
c5.nextElementSibling

// 上一个兄弟标签
c5.previousElementSibling

2、导航器 class查找

  document的方法 querySelector 也可以识别cs选择器的语法，获取到标签对象，
                querySelectorAll获取到的是数组类型。

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

</head>
<body>


<div class="c1">
    <div class="c2">
        <div class="c3">aaa</div>
        <ul>
            <li>123</li>
            <li>456</li>
        </ul>
    </div>
</div>

<script>

      // document的方法 querySelector
      // 也可以识别cs选择器的语法，获取到标签对象，
      var c1 = document.querySelector('.c1 .c2 .c3')
      console.log(c1)


      //  querySelectorAll获取到的是数组类型。
      var c1 = document.querySelectorAll('ul li')
        console.log(c1)

</script>

image-20230313184500779

image-20230313184823911

posted @ 2023-03-13 17:23  mmszxc  阅读(203)  评论(0)    收藏  举报