js ，DOM节点，制作点名器

最新推荐文章于 2023-05-25 00:20:26 发布

VIP文章三岁九年

最新推荐文章于 2023-05-25 00:20:26 发布

阅读量129

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/xh0112/article/details/112491770

版权

DOM节点

document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。
html
页面中最大的元素节点。根元素节点。
元素节点
html标签
文本节点
每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。
属性节点：
属性节点不能单独存在，必须依赖于元素节点。
注释节点
页面中的注释，作为说明文本使用户。

自定义获取元素节点方法

       function elementsByClassName(node,classStr){
   
            // 1.获取node这个节点下面的所有子节点。
            var nodes = node.getElementsByTagName("*");
            // 2.存放符合条件的节点
            var arr = [];
            //3.遍历所有的子节点
            for (var i = 0; i < node.length; i++) {
   
                //4.判断子节点的class是否与传入的classStr相等
               if(nodes[i].className === classStr){
   
                   //5.若相等，则将其放入数组中。
                   arr.push(nodes[i]);
               }
            }
            return arr;
        }
        elementsByClassName(node,classStr)

node 表示传入的节点，获取该节点的元素节点。
classStr 表示传入的classname ，通过classname匹配元素节点

操作元素节点的属性

标签上的属性分类：
1.原生属性
2.自定义属性
3.H5 自定义属性

原生属性
语法：元素.属性名

 window.onload = function() {
   
            var oDiv = document.getElementsByTagName("div")[0];
            // 获取id
            console.log(oDiv.id);
            }
<body>
    <div class="box" id="box1" data-list="idBox">这是div标签</div>
</body>

获取id属性
在这里插入图片描述

修改/新增：
元素.属性名 = “值”
在这里插入图片描述

id被修改

获取：
元素.属性名
在这里插入图片描述

【注意】class属性是例外，不能直接通过属性名获取，而是用className

自定义属性
不能直接使用
元素. 这个语法来获取。
三个方法去操作：
获取
getAttribute(“属性名”);

   <script>
            var oDiv = document.getElementsByTagName("div")[0];
            console.log(oDiv.getAttribute("id"));
   </script>
    <body>
          <div class="container" id="box" index="index" data-id="idBox">我是div标签</div>
    </body>

在这里插入图片描述

返回值：字符串

设置
setAttribute(“属性名”,“属性值”)

<script>
        window.onload = function() {
   
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.setAttribute("id", "box2");
</script>
<body>
      <div class="container" id="box" index="index" data-id="idBox">我是div标签</div>
</body>

在这里插入图片描述
id的属性发生变化

删除
removeAttribute(“属性名”)

<script>
        window.onload = function() {
   
            var oDiv = document.getElementsByTagName("div")[0];
            //删除id
            oDiv.removeAttribute("id");
</script>
<body>
      <div class="container" id="box" index="index" data-id="idBox">我是div标签</div>
</body>

在这里插入图片描述
这里id被删除。

操作元素的类名

按照原生属性的方式来操作
获取
元素.className
设置

最低0.47元/天解锁文章

三岁九年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js ，DOM节点，制作点名器

DOM节点document页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。html页面中最大的元素节点。根元素节点。元素节点html标签文本节点每一段文本内容都是一个文本节点包含换行和空格一般来说作为元素节点的子节点存在。属性节点：属性节点不能单独存在，必须依赖于元素节点。注释节点页面中的注释，作为说明文本使用户。自定义获取元素节点方法 function elementsByClassName(node,classSt
复制链接

扫一扫