DOM（二）

最新推荐文章于 2024-10-30 19:10:39 发布

错言语

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量79

点赞数 1

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/qq_46150052/article/details/121066869

版权

笔记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

DOM

14 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

自定义属性的操作

1.获取属性值

element.属性 获取属性值（元素本身自带的属性）

console.log(div.id);

element.getArrtibute('属性')get获得attribute属性的意思

console.log(div.getAttribute('id'));
       console.log(div.getAttribute('index'));

2.设置元素属性值

element.属性='值'

div.id = 'test';
div.className = 'navs';

element.setArrtibute('属性'，'值')主要针对自动定义属性

div.setAttribute('index', 2);
div.setAttribute('class', 'footer');
// class 特殊  这里面写的就是class 不是className

3.移除属性

element.removeAttribute移除属性

div.removeAttribute('index');

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute(‘属性’) 获取

<div getTime="20"></div>
<script>
    var div = document.querySelector('div');
 console.log(div.getAttribute('getTime'));
</script>

1.设置H5自定义属性

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

<div data-index=“1”></div>

或者使用js设置

element.setAttribute(‘data-index’, 2)

2.获取H5自定义属性

兼容性获取 element.getAttribute(‘data-index’);

// h5新增的获取自定义属性的方法 它只能获取data-开头的
<div data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
 console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
</script>

H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
        var div = document.querySelector('div');
      // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

节点操作—获取元素

使用原因：

DOM提供方法获取元素—逻辑性不强、繁琐
节点层级关系获取元素—逻辑性强，兼容性差（更常用）

节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

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

节点层级

1.父级节点

`node.parentNode`

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

2.子节点

1.`parentNode.childNodes（标准）`

返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {   
    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);}
}

2.`parentNode.children（非标准）`

是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持

3.第一个节点和最后一个节点

`parentNode.firstChild`

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

`parentNode.firstElementChild`

返回第一个子元素节点，找不到则返回null(有兼容性问题，IE9 以上才支持，但好用)

`parentNode.lastChild`

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

`parentNode.lastElementChild`

返回最后一个子元素节点，找不到则返回null(有兼容性问题，IE9 以上才支持，但好用)

第一个节点和最后一个节点兼容性解决方案

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] "

4.兄弟节点

1.`node.nextSibling`

返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

2.`node.nextElementSibling`

返回当前元素下一个兄弟元素节点，找不到则返回null(有兼容性问题， IE9 以上才支持)

3.`node.previousSibling`

返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点

4.`node.previousElementSibling`

返回当前元素上一个兄弟节点，找不到则返回null(有兼容性问题， IE9 以上才支持)

兄弟节点兼容性解决方案

封装一个兼容性问题的函数

 function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }