【Javascript】HTML DOM知识点总结

1.什么是DOM（Document object model 文档对象模型）

DOM定义了访问HTML和XML文档的标准：它中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML DOM - 针对 HTML 文档的标准模型。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2. DOM 节点

HTML 文档中的所有内容都是节点：

a 整个文档是一个文档节点
b 每个 HTML 元素是元素节点
c HTML 元素内的文本是文本节点
d 每个 HTML 属性是属性节点
e 注释是注释节点

* **父节点 子节点 兄弟节点 可以类比数据结构来思考**。*

3.DOM 方法

方法就是我们可以在节点（也就是HTML当中）执行的动作。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。比如我自己是一个对象（可以想象自己就是一个美丽的女程序员，对，没错！），我可以做的动作（也就是方法）有eat（），coding（），study（）等等；我也有自己的属性包括身高体重年龄等。

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）

appendChild(node) - 插入新的子节点（元素）

removeChild(node) - 删除子节点（元素）

4.DOM 属性

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

5.访问 HTML DOM - 查找 HTML 元素

访问 HTML 元素等同于访问节点

document.getElementById(“id”); //获取id中的元素

document.getElementsByTagName(“p”); //返回带有指定标签名（这里是标签p）的所有元素。可以用数组表示第几个标签

document.getElementsByClassName(“classname”);//带有相同类名的所有 HTML 元素

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。