饥人谷_李栋
1.节点的属性
2.节点的方法
3.节点的集合
一、node属性
nodeName://节点的名字
nodeType://节点的常数值
ELEMENT_NODE-> 1
TEXT_NODE-> 3
DOCUMENT_NODE-> 9
ATTRIBUTE_NODE-> 2
ownerDocument://拥有他的文档
nextSibling://下一个兄弟节点(后面有空格则返回一个文本节点内容为空格)
previousSibling://前一个兄弟
parentNode:父节点
parentElement://父Element节点
textContent://返回当前节点和后代节点的文本内容
注意,会忽略节点内部的标签,如果不是直接包含文本会一直往里走直到找到文本为止
document.getElementById('div').textContent='<p>hello!</p>'
//会把<p>hello!</p>整体当作文本
document.getElementById('div').innerHTML ='<p>hello!</p>'
//会把hello!当作文本
nodeValue://返回/设置节点的值(字符串)
childNodes:// 返回一个子节点集合(类似array)
firstNode://返回 第一个子节点
lastChild://返回最后一个子节点
baseURI://当前网页的绝对路径
注意,不是URL
二、节点的方法
- appendChild(节点对象)://在子节点后 插入节点对象
var p=document.createElement('p')//创建一个p标签
document.body.appendChild(p)//在body的子节点后加p
var p=document.createTextNode('你好')
document.body.appentchild(p)//在body的子节点后加p内容为你好
- cloneNode(参数)://克隆一个节点
注意,参数为true,则克隆子节点
添加的事件回调不会被克隆
- insertBefore(): //将某个节点插入当前节点的指定位置
target.insertBefore(插入的元素,插入的位置)
- removeChild(参数)://删除子节点
注意,参数必须是当前节点的儿子
删除所有子节点://循环删,直到为空
- replaceChild()://将一个新节点替换某一个子节点
target.replaceChlid(新儿子,旧儿子)
注意,id区分大小写,标签不分大小写
等号左边可以随便,右边就要区分了
contain()://是否包含这个内容
compareDocumentPosition(): //同contain返回7bit二进制值表示参数节点和当前节点的位置
0相同1不在同一个文档2在前面4在后面8包含16被包含32浏览
器私有
isEqualNode()://节点是否相等,同===
normalize()://处理节点内部的文本节点(去除空文本节点,其他的合并为一个文本节点)
三、节点的集合
-
NodeList
注意,他是一个对象,不是数组,只含有索引和length两个属性 -
HTMLCollection
注意,也是个节点集合,成员是element (不包含文本节点) - parentNode //获取Element子节点
Element节点、document节点、DocumentFrangment节点
- children //返回所有Element子节点
- firstElementChild //返回第一个Element子节点
- lastElementChild //返回最后一个Element子节点
- childElementCount //返回所有Element子节点的数目
- ChildNode处理子节点
- remove()//移除当前节点