WebAPIs②
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>