07-WebAPIs②（自定义属性、节点操作）

舍予一

已于 2022-03-29 08:59:02 修改

阅读量258

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

于 2022-01-10 13:20:36 首次发布

本文链接：https://blog.csdn.net/hsy0827/article/details/122366581

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1. 自定义属性操作

1.1 获取属性值

element.属性 获取内置属性值
element.getAttribute('属性') 主要获取自定义的属性值

1.2 设置属性值

element.属性 = '值' 设置内置属性值
element.setAttribute('属性','值') 主要设置自定义的属性值

1.3 移出属性

element.removeAttribute('属性') 主要移除自定义的属性值

1.4 H5自定义属性

设置H5自定义属性：

直接在html标签里设置，如<div data-index = "1"></div>
js设置，如element.setAttribute('date-index',1)

获取H5自定义属性：

兼容性获取element.getAttribute('date-index')
H5新增element.dataset.index 或 element.dataset[index]（IE11才开始支持）

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    // console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // 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>

2. 节点操作

2.1 节点概述

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

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
在这里插入图片描述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3

2.2 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

2.3 父级节点

node.parentNode

可返回某节点最近的一个父节点；
如果指定节点没有父节点则返回null。

2.4 子节点

所有子节点

parentNode.childNodes（标准）

返回指定节点的子节点的集合；
返回值里包含所有的子节点，包括元素节点，子节点等。

子元素节点

parentNode.children（非标准）

返回所有的子元素节点，其余节点不返回。

第一个子元素节点：parentNode.children[0]
最后一个子元素节点：parentNode.children[parentNode.children.length - 1]

第一个子节点

parentNode.firstChild

返回第一个子节点（包含所有节点），找不到则返回null。

最后一个子节点

parentNode.lastChild

返回最后一个子节点（包含所有节点），找不到则返回null。

第一个子元素节点

parentNode.firstElementChild（IE9以上支持）

返回第一个子元素节点，找不到则返回null。

最后一个子元素节点

parentNode.lastElementChild（IE9以上支持）

返回最后一个子元素节点，找不到则返回null。

2.5 兄弟节点

下一个兄弟节点

node.nextSibling

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

上一个兄弟节点

node.previousSibling

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

下一个兄弟元素节点（有兼容性问题）

node.nextElementSibling（IE9以上支持）

返回当前元素的下一个兄弟元素节点，找不到则返回null。

上一个兄弟元素节点（有兼容性问题）

node.previousElementSibling（IE9以上支持）

返回当前元素的上一个兄弟元素节点，找不到则返回null。

解决兄弟元素节点兼容性问题

自己封装函数

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

2.6 创建节点

document.createElement('tagName')
创建由tagName指定的HTML元素。动态创建元素节点

2.7 添加节点

node.appendChild(child) ：讲一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.insertBefore(child,指定元素) ：讲一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

2.8 删除节点

node.removeChild(child)
从 node节点中删除一个子节点，返回删除的节点。

2.9 复制节点

node.cloneNode()：返回调用该方法的节点的一个副本。

参数为空或者false时，为浅拷贝，即克隆赋值节点本身，不克隆里面的子节点；
参数为true时，为深度拷贝，会复制节点本身及里面的所有节点。

2.10 创建元素的三种方式

document.write()
element.innerHTML
document.createElement()

区别：

document.write是直接将内容写入页面的内容流。文档流执行完毕时再执行，它会导致页面全部重绘。
innerHTML是讲内容写入某个DOM节点，不会导致页面重绘。当创建多个元素时，采用数组形式拼接效率更高，但结构稍微复杂。
createElement()创建多个元素效率稍微低一点点，但结构更清晰。

2.11 innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

createElement方式（效率一般）

<script>
    function fn() {
        var d1 = +new Date();
        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

innerHTML数组方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>