JS学习笔记（八）宿主对象DOM的学习/DOM的四种节点/DOM的增删改查

JS学习笔记（八）宿主对象DOM和BOM学习

提示：宿主对象DOM和BOM
本次学习DOM
宿主对象DOM的学习/DOM的四种节点/DOM的增删改查

---

---

一、DOM

document object model 文档 对象 模型

1.模型

2.DOM节点

分为四类：

1. 文档节点（document） 一整个html页面

• 浏览器已经为我们提供文档节点对象，该节点对象是window的属性。可以在页面中直接使用，代表整个网页。

2. 元素节点（Element） 一个标签元素对象。
3. 文本节点（Text） 标签的开始和结束之间的文本。获取元素节点的第一个子节点，一般为文本节点
4. 属性节点（Attr） 一个标签里的元素属性。我们一般不使用属性节点。

3.元素节点（Element）的属性

元素节点（Element）即一个标签元素对象。

1. 属性的获取：元素对象.属性名
   如element.value，element.id，element.className

//例：
element.value = “hello”
element.id = “id01”
element.className = “newClass”

4.其他属性

1. nodeValue 文本节点可以通过nodeValue属性获取和设置文本节点的内容（如上图表所示）
2. innerHTML 元素节点通过该属性获取和设置标签内部的html代码
3. innerText 该属性可以获取到元素内部的文本内容。和innerHTML类似，不同的是它在输出显示时会自动去掉html。

---

二、DOM查询方法

1.通过document对象调用获取元素节点（即标签）

通过document对象调用

1. document.getElementById(" ") 通过节点id属性获取一个元素节点对象
2. document.getElementsByTagName(" ") 通过节点标签名获取并返回带有指定标签名的对象的集合。
3. document.getElementsByName(" ") 通过节点name属性获取并返回带有指定标签名的对象的集合。
4. document.getElementsByClassName(" ") 通过节点class属性获取并返回带有指定标签名的对象的集合。不支持IE8及以下的浏览器。

• 如果需要读取元素节点的属性，直接使用元素节点.属性
• 注：class属性不能采用这种方式，要用className。

2.通过具体的元素节点调用获取元素节点的子节点

1. document.getElementByTagName(" ") 方法，返回当前节点指定的标签名后代节点

var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
console.log(lis.length);//返回元素节点的子节点数组的长度

区别子元素和子节点 。子元素是元素节点，子节点可以是文本标签。

2. childNodes 属性 包括文本节点在内的的所有节点，
   [ ] 根据dom标签间的空白也算子节点，但在IE8及以下的浏览器中不会将空白文本作为子节点。
3. firstChild 属性 可以获取当前元素的第一个子节点（包括空白文本节点）
4. lastChild 属性 可以获取 当前元素的最后一个子节点（包括空白文本节点）
5. children 属性 可以获取当前元素的所有子元素

3.通过具体的元素节点调用获取元素节点的父节点和兄弟节点

1. parentNode 属性 表示当前节点的父节点
2. previousSibling 属性 表示当前节点的前一个兄弟节点 （也可能获取到空白的文本）
3. nextSibling 属性 表示当前节点的的后一个兄弟节点（也可能获取到空白的文本）
4. previousElementSibling nextElemenSibling 属性 表示当前节点的前、后一个兄弟元素，但是IE8及以下不支持。

4.document的一些属性

1. document.body 保存body的引用
2. document.documentElement 保存html根标签
3. document.all 页面里的所有元素

---

三、DOM增删改方法

1.常见方法

• document.createElement(" ") 可以用于创建一个元素节点对象

• 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象, 将创建好的对象作为返回值返回

• document.createTextNode(" ") 可以用来创建一个文本节点对象

• 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

• document.appendChild() 向一个父节点中添加一个新的子节点

• 用法：父节点.appendChild(子节点);

也可以这么做：

					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);

• document.insertBefore() 可以在指定的子节点前插入新的子节点

• 语法：父节点.insertBefore(新节点,旧节点);

• document.replaceChild() 使用指定的子节点替换已有的子节点

• 语法：父节点.replaceChild(新节点,旧节点);

• document.removeChild() 可以删除一个子节点

• 语法：父节点.removeChild(子节点); 子节点.parentNode.removeChild(子节点);

四、事件 Event

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript 与 HTML 之间的交互是通过事件实现的。
• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个
元素上方、按下键盘上某个键等等。

1.事件函数

1. window.onload()

• onload事件会在整个页面加载完成之后触发。
• 可以为window绑定一个onload事件，该事件对应相应的函数会在页面都加载完成后执行。

window.onload() = function(){
    //页面加载完成后执行的内容
};

---

五、未结问题

未解决的一个问题