介绍

DOM（Document Object Model）文档对象模型，定义了访问 HTML 和 XML 文档的标准，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

那显然，HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

DOM 查找

您可以以不同的方式来访问 HTML 元素，如：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

document.getElementById("id");

document.getElementsByTagName("p");

document.getElementsByClassName("class");

或是直接通过上下节点来查找元素：

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

tag.parentElement.nextElementSibling //获取父亲的下一级兄弟标签

tag.children //获取所有子标签

DOM修改

先选择元素在进行修改，一般有如下方法：

//属性
innerText   //文本

innerHTML   //HTML内容(包括元素、注释和文本节点)

value       //获取input/select/textarea里面输入的内容

//方法
appendChild()             //把新的子节点添加到指定节点。

removeChild()             //删除子节点。

replaceChild()             //替换子节点。

insertBefore()            //在指定的子节点前面插入新的子节点。

createAttribute()    //创建属性节点。

createElement()           // 创建元素节点。

createTextNode()     //创建文本节点。

getAttribute()         //返回指定的属性值。

setAttribute()        //把指定属性设置或修改为指定的值

如下为部分操作实例：

//修改HTML内容

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

//修改元素样式

<script>

document.getElementById("p2").style.color="blue";

</script>

//创建p标签并增加文本节点

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

</script>

//查找元素，后追加新元素

<script>

var element=document.getElementById("div1");

element.appendChild(para);

</script>

DOM事件

onclick // 当元素被点击后触发onclick事件

onload //当用户进入页面时，会触发onload 事件

onunload  //当用户进入页面时，会触发onunload 事件

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

onchange  //当用户改变输入字段的内容时

onmouseover //鼠标指针移动到元素时触发函数

onmouseout  //鼠标指针离开元素时触发函数

onmousedown  //当某个鼠标按钮被点击时，触发 onmousedown 事件

onmouseup //当鼠标按钮被松开时，会触发 onmouseup 事件

巴特西

3.HTML DOM

介绍

HTML DOM 节点

DOM 查找

DOM修改

DOM事件

最新文章

热门文章