HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法:
- getElementById(id) - 获取带有指定 id 的节点(元素)
- getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 返回节点列表。节点列表是一个节点数组。
- getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
- appendChild(node) - 插入新的子节点(元素)
- removeChild(node) - 删除子节点(元素)必须清楚该元素的父元素
- replaceChild() 替换子节点。
- insertBefore() 在指定的子节点前面插入新的子节点。
- createAttribute() 创建属性节点。
- createElement() 创建元素节点。
- createTextNode() 创建文本节点。
- getAttribute() 返回指定的属性值。
- setAttribute() 把指定属性设置或修改为指定的值。
一些常用的 HTML DOM 属性:
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点 可以通过这个属性查找到节点的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
- nodeValue 属性
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
-
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
onload和onunload事件
当用户进入或离开页面时,会触发 onl oad 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
<body onl oad="checkCookies()">
onchange事件
onchange 事件常用于输入字段的验证。
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onm ouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onm ousedown 事件,然后,当鼠标按钮被松开时,会触发 onm ouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。
导航节点关系
能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。
DOM根节点
- document.documentElement - 全部文档
- document.body - 文档的主体