JavaScript DOM文档对象模型

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(“内容”);