dom节点基础
节点的类型分为：
元素节点（就是标签），文本节点（标签内的文本），属性节点（id=''）
比如下列代码中：
<div>测试<em>倾斜</em>列表</div>
元素节点是：
<em>倾斜</em>
文本节点是：
测试
nodeType属性：每个节点都有一个nodeType属性，当nodeType是1的时候为元素节点，当是3的时候是文本节点。
nodeName属性：文本节点的nodeName属性为null,元素节点的nodeName属性是获取元素节点的标签名和tagName值。
nodeValue属性：元素节点本身没有内容为null，文本节点的nodeValue的值是文本内容。
节点的关系
childNodes属性：每个节点都有一个childNodes属性，通过访问数组的方法可以访问保存的NodeList对象，NodeList对象保存着一组有序的节点。可以通过访问length可以访问NodeList的长度。但NodeList并不是数组而是类数组对象。
例如：
var firstChild=someNode.childNodes[0]
var count=someNode.length
parentNode属性：该属性指向文档树中的父节点，子节点的的该属性指向同一个父节点。
appendChild方法 可以动态添加元素节点和innerHtml的效果一样
var node=document.creatElement('li')
var textnode=document.createTextNode('water')
node.appendChild(textNode)
document.getElementById('list').appendChild(node)//先创建标签，然后创建内容，再把内容添加到标签上。
replaceChild方法 接受两个参数即要插入的节点和要替换的节点。这个要插入的新节点可以是已经存在的也可以是新创建的。
<ul>
<li>coffee</li>
<li>milk</li>
</ul>
var textNode=document.createTextNode('water')
var item=document.getElementById('list').childNodes[0]
item.replaceChild(textNode,item.childNodes[0])//item=document.getElementById('list').childNodes[0]指的是<li>coffee</li>而item.childNodes[0]指的是coffee
removeChild方法如果想移除节点的话就用removeChild方法。
document类型
文档子节点
访问html元素：
document.documentElement
document.childNodes[0]
document.firstChild
访问body元素
document.body
文档信息
document.URL//访问完整的url
document.title
Element类型
访问元素的标签名：
<div>this is a cat</div>
var box=document.querySelector('div')
alert(box.nodeName)//div
alert(box.tagName)//div
访问元素的属性值
- 对于html元素
<div class='ba',id='bb',title='body'></div>
var box=document.querySelector('div')
alert(box.id);
alert(box.className)
alert(box.title)
alert(box.head)
- getAttribute方法
该方法也可以获取自定义属性的值
alert(box.getAttribute('id'))
alert(box.getAttribute('class'))
尽量避免用getAttribute访问style和onclick。
设置元素的属性
- setAttribute
div.setAttribute('id','ba')
传入两个参数：一个是设置的属性名称，一个是属性的值。
- 可以直接设置
div.id='ba'
document.charset='UTF-8'
访问元素的属性
box.attributes[0]
创建元素
var box=document.creatElement('div')
document.body.appendChild(box)//将新创建的元素添加到body中
Text类型
创建文本节点
var text=document.createTextNode('hello world')
选择符API
querySelector
var body=document.querySelector('body')
当document类型调用querySelector时指的是在文档元素的范围内查找匹配的元素。
当通过Element类型调用querySelector时指的是在该元素的后代元素的范围内查找匹配的元素。
querySelectorAll
var strongs=document.querySelectorAll('p strong')//取得所有p元素中的所有strong元素。
自定义元素的属性
必须添加前缀data-
可以通过元素的dataset属性来访问元素的属性的值。
var box=div.dataset.appId//属性为data-appId
children属性
访问元素的子节点与childNodes属性差不多,只不过忽略了空白节点。更常用。
var childCount=element.children.length;
var firstChild=element.children[0]
样式
访问元素的样式
- 对于使用短横线的css属性名，必须将其转化成驼峰的样式。对于float则写成cssFloat
div.style.backgroundColor='red';
div.style.cssFloat='left'//非ie
div.style.styleFloat='left'//ie
style属性只能获取和设置行内不能获取内联连接。
- document.defaultView提供了getComputedStyle的方法
var div=document.querySelector('div')
var style=document.defaultView.getComputedStyle(div,null)
alert(style.backgroundColor)//red
网友评论