我与DOM的第一次邂逅

摘要：是操作网页的接口，全称为文档对象模型。它的作用是将网页转为一个对象，从而可以用脚本进行各种操作节点的最小组成单位叫做节点。

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成

一个文档的所有节点，按照所在的层级，类似树状结构 它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点

除了根节点，其他节点都有三种层级关系:

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNodes）：直接的下级节点

同级节点关系（sibling）：拥有同一个父节点的节点

Document对象提供了访问和更新HTML页面内容的属性和方法
Document对象作为DOM访问和更新HTML页面内容的入口 可以定位HTML页面中的元素 或者创建新的元素

console.log(document)    //#document   页面上的内容

Document对象的属性和方法被定义在prototype原型中

console.log(Document.prototype)   //一个包含很多属性和方法的对象

Document对象继承于Node对象 Node对象继承于EventTarget对象

console.log(Document.prototype instanceof Node)  //true
console.log(Node.prototype instanceof EventTarget) //true
console.log(Document.prototype instanceof EventTarget) //true

DOM无论是使用的还是得到的都应该是对象

getElementById()方法

    var buttonElement =document.getElementById("btn");
    console.log(buttonElement instanceof Object)  //true

getElementsByName()方法
通过name属性获取
由于name属性不唯一 得到的结果可能是多个 所以为Elements
因为得到的是一个集合 如果想取到对应的值 需要添加索引值

 
 var btn=document.getElementsByName("btn")[0]

getElementsByTagName
通过TagName属性获取 与name属性相同

 
 var btn=document.getElementsByTagName("button")[0]

getElementsByClassName
通过ClassName属性获取 与name属性相同 存在兼容问题

 
 var btn=document.getElementsByClassName("btn")[0]

querySelector()方法
通过CSS选择器定位第一个匹配的元素
接收参数 表示选择器 可以包含一个或多个CSS选择器 多个用逗号分隔

  
querySelectorAll()方法
通过CSS选择器定位所有匹配的元素
返回一个NodeList集合
var liList=document.querySelectorAll("li);
创建节点
创建元素节点
Document对象提供了createElement()方法创建元素节点
var buttonElement=document.crateElement("button");
创建文本节点
Document对象提供了createTextNode()方法创建元素节点
接收一个参数 是文本节点中的内容 是一个字符串
var text=document.createTextNode("我是文本内容")
创建属性节点
Document对象提供了createAttribute()方法创建元素节点
接受一个参数 为节点的属性名称
创建属性节点方法只具有属性名称 没有属性值
var attributeNode=document.createAttributeNode("id")   //为元素添加一个id属性
Node对象
Node对象主要提供了用于解析DOM节点树结构的属性和方法
Node对象是解析DOM节点结构的主要入口
继承关系
Node对象继承于EventTarget对象  EventTarget是一个用于接收事件的对象
console.log(Node.prototype instanceof EventTarget)   //true
Document对象和Element对象都继承于Node对象
console.log(Document.prototype instanceof Node)  //true
console.log(Element.prototype instanceof Node)   //true
测试Node对象
Node对象是DOM底层封装的对象  所以并不能通过直接打印Node对象来查看它的属性或者方法

判断节点类型
Node对象中提供了nodeName nodeType nodeValue  分别用于获取指定节点的节点名称  节点类型  节点值

nodeName 用于获取指定节点的节点名称

var btn =document.getElementById("btn");
console.log(btn.nodeName)   //BUTTON

不同的节点类型 nodeName返回的节点名称不同 :

元素节点(Element) ---> 元素节点的节点名

属性节点(Attribute) ---> 属性节点的属性名

文本节点(Text) ---> #text

文档节点(Document) ---> #document

var btn =document.getElementById("btn");
console.log(btn.nodeType)  //1

不同的节点类型 nodeType返回的节点名称也不同:

元素节点(Element) ---> 1

属性节点(Attribute) ---> 2

文本节点(Text) ---> 3

文档节点(Document) ---> 9

按钮
var btn =document.getElementById("btn");
console.log(btn.nodeValue);   // null

不同的节点类型 nodeValue返回的节点类型也不同:

元素节点(Element) ---> null

属性节点(Attribute) ---> 属性节点的属性值

文本节点(Text) ---> 文本节点的内容

文档节点(Document) ---> null

通过指定元素查找它的父节点 可以用Node对象的parentNode属性实现

    
Xayah
    
Lucian
    
Vayne


 var abm =document.getElementById("abm");
 var parent =abm.parentNode;
 console.log(parent); //  
...

通过parentElement属性 获取其父元素节点

console.log(abm.parentElement)  //
...

区别:

父节点(parentNode) 并没有指定节点的父节点是哪一个类型的节点

父元素节点(parentElement) 指定了节点的父节点一定是元素节点

获取html的父节点 为document文档节点
但document文档节点并不是元素节点

var html=document.documentElement;
console.log(html.parentNode)    //文档节点
console.log(html.parentElement)  //null

可以通过Node对象的childNodes firstChild lastChild 属性实现

获取所有子节点
childNodes用于获取指定节点的所有子节点
返回一个只读的NodeList对象 并且是一个动态的NodeList对象

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
var children=parent.childNodes;
console.log(children)  //NodeList(7) [text, li, text, li#abm, text, li, text]

获取第一个子节点
Node对象提供的firstChild属性用于获取指定节点的第一个子节点
如果当前节点无子节点 则返回null

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
console.log(parent.firstChild) //#text   第一个li前的换行

获取最后一个子节点
Node对象提供的lastChild属性用于获取指定节点的最后一个子节点

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
console.log(parent.lastChild)   //#text 最后一个li后的换行

previousSibling 获取指定节点的上一个兄弟节点

    
Xayah
Lucian
    
Vayne


var abm=document.getElementById("abm");
console.log(abm.previousSibling)  //
Xayah

nextSibling 获取指定节点的下一个兄弟节点

    
Xayah
    
Lucian
Vayne


var abm=document.getElementById("abm");
console.log(abm.nextSibling)  //
Vayne