JavaScript基础-DOM

什么是DOM？

DOM，全称为Document Object Model（文档对象模型）。

在JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作Web页面。

节点（Node）

节点是构成我们网页最基本的组成部分，每一个部分都是一个节点。

节点分类：

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTML节点
• 属性节点：元素中的属性
• 文本节点：HTML标签中的文本内容

事件

事件，就是用户与浏览器之间的交互行为。比如点击按钮、鼠标移动、关闭窗口等。

我们可以为按钮对应的事件绑定处理函数，这样当事件被触发时，其对应的函数就会被调用。

文档的记载

浏览器在加载一个页面时，是按照自上向下的顺序加载的。

如果script标签写在页面的上边，在执行代码时，页面还没加载，DOM对象也没有加载，此时会导致无法获取到DOM对象。

onlaod事件

onload事件会在整个页面加载完成之后加载，我们可以为window绑定一个onload事件，这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

<script type="text/javascript">
window.onload = function(){}
</script>

DOM查询

获取元素节点

• getElementById()：通过id属性来获取一个元素节点对象
• getElementsByTagName()：通过标签名来获取一组元素对象节点
• getElementsByName()：通过name属性来获取一组元素节点对象

如果需要读取元素节点的属性，可以直接使用元素.属性名。

注意：class属性不能这样读取，应该使用元素.className读取。

例子：

<script type="text/javascript">
var tab = document.getElementById("#tab")
var color = tab.color
//获取id为tab的标签的颜色属性
</script>

元素属性： 

• childNode()：获取包括文本节点在内的所有节点（DOM标签间空白也会当成空白节点）
• children()：可以获取当前元素的所有子元素
• firstChild()/lastChild()：可以获取当前元素的第一个/最后一个子节点（包括空白节点）
• firstElementChild()：获取当前元素的第一个子元素（但不支持IE8及以下浏览器）
• innerText()：获取元素内部的文本内容
• previousSibling()/nextSibling()：获取前一个/后一个兄弟元素节点（包括空白节点）
• previousElementSibling()：获取前一个兄弟元素（IE8及以下浏览器不支持）
• parentNode()：获取当前元素的父节点
• nodeValue()：获取和设置文本节点的内容

注意：在IE8及以下浏览器中，不会将空白文本当成子节点。 

DOM查询的其他方法

• document.getElementByClassName()：根据class属性值获取一组元素节点对象
• document.querySelector()：需要一个选择器作为参数，可以根据该CSS选择器查询一个元素节点对象。
• document.querySelectorAll()：跟document.querySelector()方法类似，但是它会将符合条件的元素封装在一个数组中返回，即使只有一个也是返回数组。

在IE8中没有getElementByClassName(),可以使用document.querySelector()代替，该方法只会返回一个唯一的元素，如果满足条件的元素有多个，也只返回一个。

DOM增删改

• document.createElement()：用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建一个元素节点对象，并将创建好的对象作为返回值返回。
• document.createTextNode()：用于创建一个文本节点对象，需要一个文本内容作为参数，将会根据该文本创建一个文本节点，并将新的节点返回。
• appendChild()：向一个父节点中添加一个新节点

       语法：父节点.appendChild(子节点)

• innerBefore()：可以在指定的子节点前插入新的节点

       语法：父节点.innerBefore（新节点，旧节点)

• replaceChild()：可以使用指定的子节点代替已有的子节点

        语法：父节点.replaceChild(新节点，旧节点)

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

        语法：父节点.renoveChild(子节点)

补充知识：

使用confirm()可以弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示出来。如果用户点击确认则返回true，否则返回false。