API - DOM - 《JavaScript知识整理》

DOM

HTML DOM节点

HTML DOM节点：在HTML DOM中所有的事物都是节点。DOM是被视为节点树的HTML
DOM节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父（parent）、子(child)和同胞(sibling)

HTML DOM方法

HTML DOM 方法是我们可以在==节点（HTML 元素）==上执行的动作。
HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。
编程接口：
可通过JavaScript（或其他编程语言）对HTML DOM进行访问
所有的HtML元素被定义为对象，而编程接口则是对象方法和对象属性

HTML DOM对象-方法和属性

一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

HTML DOM属性

属性是节点（HTML元素）的值，能够获取或设置

innerHTML用于获取或改变任意HTML元素，包括<html>和<body>;
nodeName属性规定节点的名称：nodeName 是只读的；元素节点的 nodeName 与标签名相同；属性节点的 nodeName 与属性名相同；文本节点的 nodeName 始终是 #text；文档节点的 nodeName 始终是 #document；nodeName始终包含HTML元素的大写字母标签名
nodeValue属性
- 元素节点的nodeValue是undefined或null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值

HTML DOM访问

访问HTML-DOM，查找HTML元素

访问HTML元素（节点）
- getElementById(“”)返回带有指定ID的元素引用
- getElementsByTagName(“”)返回带有指定标签名的所有元素
- getElementsByClassName(“”)返回带有相同类名的所有HTML元素；在IE的5,6,7,8中是无效的
x=document.getElementById(“main”).getElementsByTagName(“p”);
document.write(“div 中的第一个段落为: “ + x[0].innerHTML)

在获取到标签的集合后可通过索引来获取内容，emmm或者用Array.from()方法将类数组直接转为数组

HTML DOM修改

修改HTML = 改变元素、属性、样式和事件。

修改HTML元素：改变HTML内容；改变CSS样式；改变HTML属性；创建新的HTML元素；删除已有的HTML元素；改变事件（处理程序）；
创建HTML内容：innerHTML
改变HTML样式：通过HTML DOM访问HTML元素的样式对象
```
document.getElementById("p2").style.fontSize = 'larger';
```

创建新的HTML元素：先创建该元素节点，然后把他追加到已有的元素上 ```javascript

这是一个段落。

这是另一个段落。

> createTextNode  创建一个文本



5. 
**修改HTML内容**：

   - 改变HTML内容：innerHTML
   - 使用事件：在元素上点击；加载页面；改变输入字段

<a name="e2462bc2"></a>
### HTML DOM元素

添加、删除和替换HTML元素

1. 
创建新的HTML元素：createELement()+appendChild()；将新元素作为父元素的最后一个元素进行添加

2. 
insertBefore()：将新元素作为父元素的第一个元素添加

3. 
删除已有的HTML元素：父元素.removeChild(子元素)；
> 常用的配套解决方案：

> var child=document.getElementById("p1");<br />
child.parentNode.removeChild(child);

> 通过parentNode来查找要删除元素的父元素



4. 
替换HTML元素：replaceChild(新元素，旧元素)


<a name="c808283c"></a>
### HTML DOM事件

通过JavaScript对HTML事件作出反应

在HTML元素中添加以下属性

1. 
当用户点击鼠标时，当网页已加载时，当图片已加载时，当鼠标移动到元素上时，当输入字段被改变时，当HTML表单被提交时，当用户出发按键时

2. 
HTML事件属性：可以用事件属性为HTML元素分配事件

3. 
可以通过HTML DOM来分配事件：`document.getElementById("myBtn").onclick=function(){displayDate()};`

4. 
onload和onunload事件：当用户进入或离开页面时，会触发onload和onunload事件；

   - 
onload事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页

   - 
onload和onunload事件可用于处理cookies

5. 
onchange事件：onchange 事件常用于**输入字段的验证**。
<br />下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

javascript 输入你的名字:

当你离开输入框后，函数将被触发，将小写字母转为大写字母。

```

onmouseover和onmouseout事件：鼠标指针移动到或离开元素时触发函数
onmousedown、onmouseup 以及 onclick 事件：
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件

HTML DOM导航

HTML DOM节点列表：通过getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。类数组
三个节点属性：parentNode、firstChild 以及 lastChild
DOM根节点：document.documentElement - 文档全部；document.body - 文档的主体
可以通过childNodes+nodeValue属性来获取元素的内容

childNodes[]来选择选中的类数组内容，nodeValue获取该内容包含的值