HTML DOM简单总结
Posted relrayford
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML DOM简单总结相关的知识，希望对你有一定的参考价值。
1.什么是DOM？
（1）DOM是一种标准，或者说是一种接口。
（2）定义了所有 html,XML 元素的对象和属性，以及访问它们的方法，因此，通过这种标准（接口）可以准确的访问HTML，XML 文档，从而改变更新文档的内容、结构和样式。
（3） DOM的全称是 Document Object Model（文档对象模型）。
（4）可通过 javascript （以及其他编程语言）对 DOM 进行访问，以下通过js访问。
2.什么是HTML DOM?
了解了什么是DOM，那么就知道什么是HTML DOM,HTML DOM是HTML 的标准编程接口，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
3.在HTML DOM的标准中HTML的结构是什么？
HTML DOM将整个文档看成是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点，因此节点中是可以包含节点的，而节点有可以看成是对象（与java，c++面向对象编程的对象一样），因此HTML DOM便是提供了方法可以去访问这些对象。
4.如何通过HTML DOM去获得HTML中的节点（对象）？
HTML DOM的document对象（每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问）提供了三种方法:
（1）通过id获得，使用document.getElementById() 方法，返回文档中一个节点（对象）
（2）通过标签名获得，使用 document.getElementsByTagName() 方法，返回文档中所有相同标签名的节点（对象）数组，可通过索引获得，如arr[0]，便是获得第一个节点（对象）
（3）通过class名获得，使用 document.getElementsByClassName() 方法，返回文档中所有相同class名的节点（对象）数组，可通过索引获得，如arr[0]，便是获得第一个节点（对象）
5.如何通过HTML DOM修改节点（对象）的属性？
和普通的对象一样，通过上面三种方法取得节点（对象）后，在通过“.”去取得节点（对象）的属性通过“=”赋值便可更改原节点（对象）的属性值，如：
<html> <body> <p id="intro">Hello World!</p> <script>
function swit()
{ var txt=document.getElementById("intro");//"."获得id为intro的节点
txt.innerHTML="你好！！";//"="更改此节点的innerHTML属性
} </script>
<p id="intro" onclick()="swit()">hello!!</p>
</body> </html>
上面的列子中更改了<p>标签的innerHTML属性，而p中还有许多的属性（具体请去网上找，我经常在w3school网站里去查，感觉很全），若想更改p的样式请这样获取属性：txt.style.color="red",如果属性是这样的z-index,这样更改：txt.style.zIndex=10，基本上将“-”后面单词首字母改成大写就行了，如果是onclick这样的event（事件）属性这样的值是一个函数名时请这样更改:txt.onclick=function(){方法体或者是函数调用}。
此方法适用于基本上所有的标签节点的属性更改。
5.HTML DOM对象
HTML DOM有四种对象document,element,attribute,event。
（1）document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。【注：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。】
（2）element对象
在 HTML DOM 中，Element 对象表示 HTML 元素，Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，即有document三种方法获取的对 象不管是有<p>,<a>,<div>等标签获得的对象都是element对象，因此element对象和<p>,<a>,<div>等标签获得的对象就像继承一样，element的属性和方法， <p>,<a>,<div>等标签获得的对象,可以调用，如innerHTML属性是element属性，而p，a，div都有。
（3）attribute对象
在 HTML DOM 中，Attr 对象表示 HTML 属性，可以通过获取对象的属性来调用attribute对象的属性和方法，列如，
function fun()
{
var txt=document.getElementsByTagName("button").attributes[0].name;
}
.....
<button onclick="fun()">点击</button>
上列调用了attribute对象的name属性，返回了第一个属性的名字，因此txt就是"onclick";
（4）event对象
浏览器、文档（document）窗口中的发生的特定的交互瞬间；而JavaScript和HTML之间的交互行为就是通过事件来触发的，如点击事件，划过事件。
作者有话说:以上只是我的观点和我觉得对的观点，上面基本上都是读w3school后相关教程所理解，详情及更加详细网址分享：http://www.w3school.com.cn/htmldom/index.asp
最后分享一张图片
以上是关于HTML DOM简单总结的主要内容，如果未能解决你的问题，请参考以下文章