JavaScript获取节点_js获取class节点

作者：AllinToyou | 2024-02-19 07:00:55

踩

js获取class节点

1、通过ID获取，是id唯一：

document.getElementById("main ");

2、通过class名获取元素是类数组，拿到的是一个类数组，这个数组包含所有class是left的元素。类数组是从上往下拿元素

document.getElementsByClassName("left");

let l =document.getElementsByClassName("left");
console.log(l[0]);//获取类数组中第一个元素

3、通过标签名获取元素是类数组，同上(获取的是所有的p标签)

document.getElementsByTagName("p")

let l = document.getElementsByTagName("p");
console.log(l[0]);//获取类数组中第一个元素

4、通过属性name来获取元素是类数组

document.getElementsByName("属性值");


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div name="n1"></div>
    <p name="n1"></p>
    <div name="n2"></div>
</body>
<script>
    let l = document.getElementsByName("n1");
    console.log(l);
</script>
</html>

效果图：

5、通过选择器获取

document.querySelector("#main .nav") 拿到单个元素，就算页面中有多个符合条件，也只拿第一个元素

document.querySelectorAll(#banner li) 拿到所有符合条件的元素，拿到的是类数组

7、

特殊标签的获取

获取html标签 document.documentElement

获取head标签 document.head

获取body标签 document.body

获取title标签 document.title

8、通过获取的父节点来获取里面的子节点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parse">
          <div class="sub"></div>
    </div>
</body>
<script>
  
    let parse  = document.getElementsByClassName("parse")[0];
    //let sub = parse.getElementsByClassName("sub")[0];
    let sub = parse.querySelector(".sub");
    console.log(sub);
</script>
</html>

类数组只能使用（box.length）不能使用数组的方法，但可以通过Array.from(box)或 ...box 转换成数组

操作HTML内容

节点.innerHTML 获取/修改元素的HTML内容，会解析标签

节点.innerText 获取/修改元素的文本内容（老版本FF不支持这个属性，使用 .textContent 代替），不会解析标签。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/113251