DOM

JS三大核心内容

• 01->DOM document object model
• 02->BOM browser object model
• 03->ECMAScript 核心

DOM对象简介

• 说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等
• DOM就是文档对象模型，文档对象模型就是DOM
• 在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）

DOM节点的概念

• 1、根节点：在HTML文档中，html就是根节点
• 2、父节点：一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html
• 3、子节点：一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点
• 4、兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如h1和p就是兄弟节点，因为他们拥有相同的父节点body

获取DOM中指定元素

DOM查询操作

01->以类名进行查询

• getElemensByClassName()
  • 获取某个name值的元素，用于表单元素
• getElementsByName()方法都是用于获取表单元素
• 与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取

语法：document.getElementsByName("表单元素name值");

举例：

    
    
    
    
    

02->以id名进行查询

• getElementById()

  语法：document.getElementById("元素id");

• 03->以标签名进行查询

  • getElementsByTagName()

• 04->HTML5新增DOM查询方法

  • querySelector() ->返回css选择器第一个选中的元素
  • querySelectorAll() ->返回css选择器选中的元素的集合

DOM元素查询时需注意的事项

• 01->当个查询方法获取到的是多个元素时，获取到的对象为伪数组，而非正整数组
• 02->通过类名或者标签名等同时可以获取多个元素的方法时，若只需获取第一个元素时，需加上索引

innerHTML和innerText

修改和获取DOM节点内容

• 01->innerHTML 获取和修改节点内部的文本和标签
• 02->outerHTML 获取节点本身
• 03->innerText 获取节点内的文本节点
• 04->outerText 获取节点内的文本节点,和innerText区别在于赋值时会修改标签本身

创建DOM节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去

• 01->document.createElement 创建元素节点
• 02->document.createTextNode 创建文本节点
• 03->document.createAttribute 创建属性节点

语法：
var e = document.createElement("元素名");   //创建元素节点
var t = document.createTextNode("元素内容");    //创建文本节点
e.appendChild(t);   //把元素内容插入元素中去

创建复杂节点

节点的添加、替换、复制和删除操作

01->添加节点

• appendChild(childNode) ->末尾添加新的子节点
• 在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“末尾”

语法：obj.appendChild(new)
说明：obj表示当前节点，new表示新节点

    
    



    

        
HTML
        
CSS
        
JavaScript
    
    列项文本：
    
    

    

• insertBefore(newNode,existNode) ->节点前添加子节点
• 在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“首位”

语法：obj.insertBefore(new,ref)
说明：obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点

    
    



    

        
HTML
        
CSS
        
JavaScript
    
    列项文本：
    
    

    

• 这里注意一点，appendChild()和insertBefore()这2种插入节点方式都需要获取父节点才能进行操作

02->替换替换节点

• replaceChild(newNode,existNode)

语法：obj.replaceChild(new,old)
说明：obj，表示被替换节点的父节点;
new，表示替换后的新节点;
old，需要被替换的旧节点;

    
    



    
绿叶学习网
    
 输入标签：
    
    
 输入文本：
    
    

    

• 想要实现替换节点，就必须找到3点：
• （1）新节点；
• （2）被替换的子节点；
• （3）被替换子节点的父节点；

03->复制节点

语法：obj.cloneNode(bool)
说明：参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

    
    



    

        
HTML
        
CSS
        
JavaScript
        
jQuery
        
ASP.NET
    
    

• cloneNode(true/false)
• true 复制当前节点及其所有子节点
• false 仅复制当前节点

04->删除节点

• removeChild(需要删除的节点)

语法：obj.removeChild(oldChild);
说明：参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点

    
    



    

        
HTML
        
CSS
        
JavaScript
        
jQuery
        
ASP.NET
    
    
    

• 分析：这里“if(e.hasChildNodes)”判断元素节点e是否有子节点。而“e.lastChild”表示获取元素节点额的最后一个子节点
• 假如我们想要把整个列表删除，该如何实现呢?

    
    



    

        
HTML
        
CSS
        
JavaScript
        
jQuery
        
ASP.NET
    
    

• 分析：当我们点击“删除”按钮时，整个列表都被删除了。我之所以举这两个例子是让大家明白一个知识点，在使用removeChild()方法删除元素之前我们必须找到2点：
  （1）被删除的子节点；
  （2）被删除子节点的父节点；
• 在这个例子中，ul元素的父节点就是body了。

DOM属性操作

• 01->getAttribute(arrtName) 获取属性
• 02->setAttribute(attrName,attrValue) 设置属性
• 03->removeAttribute(arrtName) 删除属性

节点指针

• 01->firstChild 获取父节点的首个子节点
• 02->lastChild 获取父节点的最后一个子节点
• 03->childNodes 获取父节点的所有子节点
• 04->previousSibling 获取已知节点的前一个兄弟节点
• 05->nextSibling 获取已知节点的后一个兄弟节点
• 06->parentNode 获取已知节点的父节点

DOM节点的信息

01->nodeType节点类型的常数值

元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
02->nodeName 节点的名称
03->nodeValue 当前节点的值，格式为字符串

获取DOM元素的css样式

01->获取行间样式

• dom.style.(color)数项名 通过元素的style属性直接获取

02->获取非行间样式

• dom.currentStyle.width/height/... 兼容早期IE
• getComputedStyle(dom,null).width/height/... 兼容非IE