我与DOM的第一次邂逅

DOM

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

节点

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

节点树

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

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

• 父节点关系（parentNode）：直接的那个上级节点
• 子节点关系（childNodes）：直接的下级节点
• 同级节点关系（sibling）：拥有同一个父节点的节点

Domcument对象

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

测试Document对象

console.log(document)    //#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
  因为得到的是一个集合 如果想取到对应的值 需要添加索引值

<button name='btn'></button>
 var btn=document.getElementsByName('btn')[0]

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

<button ></button>
 var btn=document.getElementsByTagName('button')[0]

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

<button class='btn'></button>
 var btn=document.getElementsByClassName('btn')[0]

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

<button id='btn'></button<
  var btn=document.querySelector("btn")

• 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 用于获取指定节点的节点名称

<button id='btn'></button>
var btn =document.getElementById('btn');
console.log(btn.nodeName)   //BUTTON

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

• 元素节点(Element) ---> 元素节点的节点名
• 属性节点(Attribute) ---> 属性节点的属性名
• 文本节点(Text) ---> #text
• 文档节点(Document) ---> #document

nodeType 用于获取指定节点的节点类型

<button id='btn'></button>
var btn =document.getElementById('btn');
console.log(btn.nodeType)  //1

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

• 元素节点(Element) ---> 1
• 属性节点(Attribute) ---> 2
• 文本节点(Text) ---> 3
• 文档节点(Document) ---> 9

nodeValue用于获取指定节点的值

<button id='btn'>按钮</button>
var btn =document.getElementById('btn');
console.log(btn.nodeValue);   // null

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

• 元素节点(Element) ---> null
• 属性节点(Attribute) ---> 属性节点的属性值
• 文本节点(Text) ---> 文本节点的内容
• 文档节点(Document) ---> null

获取节点

获取父节点

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

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>

 var abm =document.getElementById('abm');
 var parent =abm.parentNode;
 console.log(parent); //  <ul id='parent'>...</ul>

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

console.log(abm.parentElement)  //<ul id='parent'>...</ul>

区别:

• 父节点(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对象

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


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

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


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

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

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


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

获取相邻兄弟节点

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

<ul id="parent">
    <li>Xayah</li><li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>

var abm=document.getElementById('abm');
console.log(abm.previousSibling)  //<li>Xayah</li>

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

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li><li>Vayne</li>
</ul>

var abm=document.getElementById('abm');
console.log(abm.nextSibling)  //<li>Vayne</li>