DOM—操作元素（H5自定义属性）节点操作（子、父、兄弟节点，创建、添加节点，删除节点，复制节点）

Just-Lsy

已于 2022-02-22 02:27:31 修改

阅读量2.4k

点赞数 2

分类专栏：笔记文章标签： vue.js html 前端

于 2022-02-21 23:16:48 首次发布

本文链接：https://blog.csdn.net/m0_59030524/article/details/123023896

版权

1. H5自定义属性

目的：用于保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

由于有些自定义属性很容易引起歧义，难以判断是元素内置属性还是自定义属性。

H5给我们新增了自定义属性：

1.1 设置H5自定义属性

H5规定自定义属性 date-开头作为属性名并且赋值

如:

 <div date-index = "1" ></div>

兼容性获取 element.getAttribute('data-index')
H5新增方法 element.dataset.index 或 element.dataset['index'] 获取。（ie11或以上才能使用）
如果自定义属性里面有多个链接的单词，则使用驼峰命名法获取。

Warning

对于 element.dataset.index 和 element.dataset['index'] 方法，注意 index 和 data-index 中的要对应。

<body>
    <div getTime="20" data-index="2" data-list-name="lili"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getTime);  //undefine
        console.log(div.getAttribute('getTime'));  //20
        console.log(div.getAttribute('data-list-name'));  //这种方法直接这样写
        div.setAttribute('data-time', 20);
        // H5新增的获取自定义属性的方法
        // dataset是一个集合，里面存放了所有以data开头的自定义属性
        console.log(div.dataset);   //有两个 2和20
        console.log(div.dataset.index);  //2  （取其中的index）
        // 如果自定义属性里有多个单词，新增方法用驼峰法获取
        console.log(div.dataset.listName);  //lili  
        console.log(div.dataset['listName']);  //lili  也可以这样表示

    </script>
</body>

2. 节点操作

2.1 为什么学习节点操作

获取元素通常使用两种方式:

利用DOM提供的方法获取元素，缺点：逻辑性不强、繁琐
- document.getElementByld()
- document.getElementsByTagName()
- document.querySelector()
利用 节点层级关系 获取元素
- 利用父子兄节点关系获取元素
- 优点：逻辑性强
- 缺点：兼容性稍差

两种方式都可以获取节点，但节点操作更简单

2.2 节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有 nodeType (节点类型)、nodeName (节点名称）和 nodeValue (节点值）这三个基本属性。

三种基本节点类型：

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3（文字、空格、换行）

实际开发中，主要操作的还是元素节点。

2.3 节点层级

2.3.1 父级节点

获取离元素最近的父节点，若找不到则返回 null。

node.parentNode

最低0.47元/天解锁文章

Just-Lsy

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
DOM—操作元素（H5自定义属性）节点操作（子、父、兄弟节点，创建、添加节点，删除节点，复制节点）

1. H5自定义属性目的：用于保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。由于有些自定义属性很容易引起歧义，难以判断是元素内置属性还是自定义属性。H5给我们新增了自定义属性：1.1 设置H5自定义属性H5规定自定义属性 date-开头作为属性名并且赋值如: <div date-index = "1" ></div>...
复制链接

扫一扫