Web API-节点操作

1. 排他思想

同一组元素中，每次选择的某一个元素显示样式

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
    var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // 先去除其他人
        for (var j = 0; j < btns.length; j++) {
            btns[j].style.backgroundColor = '';
        }
        // 再设置自己
        this.style.backgroundColor = 'pink';
    }
}
</script>

2. 自定义属性操作

2.1 获取属性值

获取内置属性值（元素本身自带的属性）

语法：element.属性

例：console.log(div.id)
获得自定义的属性（标准）

语法：element.getAttribute('属性')

例：console.log(div.getAttribute('index'));

注意：自定义的属性无法通过第一种方法获取

2.2 设置属性值

设置内置属性值：element.属性 = 值

例：div.className = 'hello';
设置自定义属性：element.setAttribute('属性,'值')

例：div.setAttribute('class', 'bye')

2.3 移出属性

语法：element.removeAttribute('属性');

例：div.removeAttribute('index');

2.4 H5自定义属性

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

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

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

例：<div data-index= "1" ></div>

兼容性获取：getAttribute('属性')
H5 新增获取方法：

element.dataset.属性 或 element.dataset['属性']

<div data-index='2' data-list-name="123"></div>
<script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('data-list-name')); // 123
    console.log(div.dataset); // 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset.index); // 2
    console.log(div.dataset['index']); // 2
    console.log(div.dataset.listName); // 123
</script>

注意：

h5 新增的获取自定义属性的方法它只能获取 data- 开头的
如果自定义属性里面有多个 - 链接的单词，我们获取的时候采取驼峰命名法

3. 节点操作

3.1 节点概述

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

HTML DOM 树中的所有节点均可通过 JavaScript 进行增删改查

一般地，节点至少拥有这三个基本属性

nodeType（节点类型）
- 元素节点 nodeType：1（主要操作）
- 属性节点 nodeType：2
- 文本节点 nodeType：3（包含文字、空格、换行等）
nodeName（节点名称）
nodeValue（节点值）

3.2 节点层级

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

3.3 父节点

返回某节点的父节点（最近的一个父节点）

语法：node.parentNode

如果指定的节点没有父节点则返回 null

<div class="demo">
    <div class="box">
        <span class="erweima">×</span>
	</div>
</div>
<script>
	var erweima =document.querySelector('.erweima');
 	// 获取父级 box
	console.log(erweima.parentNode);
</script>

3.4 子节点

所有子节点（标准）

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

语法：parentNode.childNodes

返回：所有的子节点，包括元素节点，文本节点等
子元素节点（非标准）

是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回

语法：parentNode.children

<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<script>
    // 获取4个li
    var ul = document.querySelector('ul');
	console.log(ul.children);
</script>

获取首子节点：parentNode.firstChild
获取尾子节点：parentNode.lastChild
获取首尾子元素节点（兼容）
- 首：parentNode.children[0]
- 尾：parentNode.children[parentNode.children.length - 1]
获取首尾子元素节点（ie9+）
- 首：parentNode.firstElementChild
- 尾：parentNode.lastElementChild

<ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
    <li>我是4</li>
</ul>
<script>
    var ul = document.querySelector('ul');
	console.log(ul.children); // 获取4个li

	console.log(ul.children[0]); // 获取第一个元素节点
	console.log(ul.children[ul.children.length - 1]); // 获取最后一个元素节点

    console.log(ul.firstChild); // 获取第一个子节点
    console.log(ul.lastChild); // 获取最后一个子节点

    // ie 9 以上可使用
    console.log(ul.firstElementChild);
    console.log(ul.lastElementChild);
</script>

3.4 兄弟节点

上 / 下一个兄弟节点（兼容）

返回当前元素的上 / 下一个兄弟节点，找不到则返回null
- 上：node.previoussibling
- 下：node.nextsibling
上 / 下一个兄弟元素节点（ie9+）

返回当前元素上 / 下一个兄弟元素节点，找不到则返回null
- 上：node.nextElementSibling
- 下：node.previousElementSibling
上 / 下一个兄弟元素节点（兼容）

function getNextElementSibling(element) {
    var el = element;
    // previoussibling 上第一个兄弟元素节点
    while (el = el.nextsibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;
}
console.log(getNextElementSibling(div));

3.5 创建节点

元素原先不存在，需要动态生成，也称为动态创建元素节点

语法：document.createElement('HTML元素')

3.6 添加节点

将一个节点追加到父节点的子节点列表未尾，似 css 的 after伪元素

追加节点：node.appendChild(child)

将一个节点添加到父节点的指定子节点前面，似 css 里面的 befor

插入节点：node.insertBefore(child, 指定索引)

注意：创建元素节点只能被添加一次

<ul><li>123</li></ul>
<script>
    var ul = document.querySelector('ul');
// 创建元素节点
var li = document.createElement('li');
var lili = document.createElement('li');

// 追加节点
ul.appendChild(li);

// 插入节点
ul.insertBefore(lili, ul.children[0]);
</script>

3.7 删除节点

从 node 节点中删除一个子节点

语法：node.removeChild(child)

返回：删除的节点

例：ul.removeChild(ul.children[0]);（删除 ul 里第一个子元素节点）

3.8 复制节点

返回调用该方法的节点的一个副本，也称为克隆节点 / 拷贝节点

语法：node.cloneNode()

如果括号参数为空或者为 false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点
如果括号参数为 true，则是深度拷贝，会复制节点本身以及里面所有的子节点

<ul>
    <li>123</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var li1 = ul.children[0].cloneNode(); // 浅拷贝
    var li2 = ul.children[0].cloneNode(1); // 深拷贝
    ul.appendChild(li1); // 仅标签
    ul.appendChild(li2); // 标签和内容
</script>

3.9 创建元素的三种方式

直接写入页面的内容流：document.write()

注意：如果页面文档流执行完毕，再调用它会导致页面重绘
将内容写入某个 DOM 节点：element.innerHTML

创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
创建元素节点：document.createElement()

创建多个元素效率稍低一点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

4. DOM的核心总结

文档对象模型（Document Object Model，简称DOM）是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

对于JavaScript，为了的够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口
对于HTML，DOM使得html形成一棵dom树，包含文档、元素、节点

4.1 创建

document.write
innerHTML
createElement

4.2 增加

appendChild
insertBefore

4.3 删除

removeChild

4.4 修改

主要修改dom的元素属性，dom元素的内容、属性，表单的值等

修改元素属性：src，href，title等
修改普通元素内容：innerHTML，innerText
修改表单元素：value，type，disabled等
修改元素样式：style，className

4.5 查询

DOM提供的API方法：getElementByld，getElementsByTagName 老用法（不推荐）
H5提供的新方法：queryselector，queryselectorAll（推荐）
利用节点操作获取元素：父（parentNode），子（children）、兄（前previousElementSibling / 后 nextElementsibling）（推荐）

4.6 属性操作

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性

posted @ 2020-09-08 20:17 今夜星河漫漫阅读(295) 评论(0) 收藏举报

刷新页面返回顶部

溯

“人间理想，追溯漫天星光”