JavaScript获取节点

最新推荐文章于 2024-05-13 05:06:08 发布

XiaoDengll

最新推荐文章于 2024-05-13 05:06:08 发布

阅读量2.5k

点赞数 6

文章标签： javascript html

本文链接：https://blog.csdn.net/quangelixi/article/details/120640604

版权

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 代替），不会解析标签。

XiaoDengll

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取节点

1、通过ID获取，是id唯一：document.getElementById("main ");2、通过class名获取的是类数组，拿到的是一个类数组，这个数组包含所有class是left的元素。类数组是从上往下拿元素document.getElementsByClassName("left");let l =document.getElementsByClassName("left");console.log(l[0]);//获取类数组中第一个元素3、通过标签名获取的是.
复制链接

扫一扫