JS 学习笔记

20227月24日 学习记录博客  学习时长：4h  学习内容：复习本周学习的DOM知识

目录

DOM 知识简单总结

1.获取元素

2. 事件基础

3. 操作元素

4. 节点操作

---

DOM 知识简单总结

1.获取元素

方法有：

1. 根据 ID 获取
2. 根据标签名获取  
3. 通过 HTML5 新增的方法获取
4. 特殊元素获取

// 根据id 
document.getElementById('id');

//根据标签名
document.getElementsByTagName('标签名');

//根据 HTML5 新增的方法获取
document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');     // 根据指定选择器返回

//获取特殊元素（body，html）
doucumnet.body  // 返回body元素对象
document.documentElement  // 返回html元素对象

2. 事件基础

执行事件的步骤：

1.  获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

3. 操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，可以利用 DOM 操作元素来改变元素里面的内容 、属性等。

// 改变元素内容
element.innerText  //从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML  //起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

自定义属性的操作

1. 获取属性值

• element.属性  获取属性值。
• element.getAttribute('属性');

区别：

• element.属性  获取内置属性值（元素本身自带的属性）
• element.getAttribute(‘属性’);  主要获得自定义的属性 （标准） 我们程序员自定义的属性

2. 设置属性值

• element.属性 = ‘值’  设置内置属性值。
• element.setAttribute('属性', '值');

区别：

• element.属性  设置内置属性值
• element.setAttribute(‘属性’);  主要设置自定义的属性 （标准）

3. 移除属性

element.removeAttribute('属性');

4. 节点操作

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

1. 父级节点

//1. 父级节点
node.parentNode  

2. 子节点

//2. 子节点  

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

parentNode.children; //虽非标准，但大多浏览器支持，可放心使用
parentNode.firstChild;   
parentNode.lastChild;  
parentNode.firstElementChild;   
parentNode.lastElementChild;    

3. 兄弟节点

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

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

3. node.nextElementSibling  //nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。 
4. node.previousElementSibling    previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。 

4 创建节点

 document.createElement('tagName')

 添加节点

 node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

 node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

删除节点

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