JavaScript DOM文档对象模型
作者:欧日鑫
撰写时间:2020年4月27日
文档对象模型
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
Core DOM
定义了一套标准的针对任何结构化文档的对象。
XML DOM
定义了一套标准的针对 XML 文档的对象。
HTML DOM
定义了一套标准的针对 HTML 文档的对象。
一、为什么要学习DOM?
原因就是DOM提供了一组按树状形式结构组织HTML文档,树状中的每一个对象被称为一个节点(即标签),每一个对象都有一个或多个属性与方法,我们可以通过DOM获得树状中的某个节点,也就是标签对象,然后对其操作,实现我们想要的功能。
二、如何操作?
1、如何获取节点?(DOM提供了3种方法)
a、通过id获取节点对象:document.getElementById(“id名”);
b、通过相同标签名获取节点对象数组:document.getElementsByTagName(“标签名”);
c、通过相同name名获取节点对象数组:document.getElementsByName(“name名”);
2、如何通过某个节点获得父节点?
假设通过上面的三个方法中的某个方法获得了节点对象obj;
则通过obj.parentNode获得了父节点;
3、如何通过父节点获得子类节点?
假设通过上面的三个方法中的某个方法获得了父节点对象obj;
a、获得第一个子节点:obj.firstChild;
b、获得最后一个子节点:obj.lastChild;
c、获得子类节点数组:obj.ChildNodes[下标],但是在这里提倡使用obj.children[],因为其兼容性比较好;
4、如何创建一个子节点,并且加到父节点上面?
var obj = document.createElement(“标签名”);//获得创建出的子节点;
obj.setAttribute(“属性名”,”属性值”);//给创建的子节点设置属性;
obj.parent.appendChild(obj);//这种方法称为追加子节点
old的父节点.insertBefore(new,old) //这种方法称为在old这个节点的前面加上new节点
5、在浏览器写内容:document.write(“内容”);