3.HTML DOM
程序员文章站
2022-05-02 22:22:29
...
介绍
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 事件
更多专业前端知识,请上【猿2048】www.mk2048.com
推荐阅读
-
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧
-
Knockout text绑定DOM的使用方法_基础知识
-
JavaScript操作DOM元素的childNodes和children区别_javascript技巧
-
HTML DOM(学习笔记一)_html/css_WEB-ITnose
-
通过dom4j解析xml字符串(示例代码)
-
【精华】Javascript对DOM增删改查,class及CSS操作,一篇全,绝对实用!
-
抓取微博热词,使用simple_html_dom来操作html数据
-
php 解析dom后 汉字都编程相仿ascii的东西了
-
Dom4j解析XML_动力节点Java学院整理
-
基于JavaScript操作DOM常用的API小结_javascript技巧