我与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>