原生JS中DOM节点相关API合集

2016-07-05

原生JS中DOM节点相关API合集

Dom节点

node：节点，浏览器认为在一个HTML页面中所有的内容为节点
元素节点：HTML标签
文本节点：文字内容（高版本浏览器把空格和换行业当作文本节点）
注释节点：注释内容 nodeType:8 nodeName:#comment nodeValue:注释内容

document文档节点 nodeType:9 nodeName:#document nodeValue:null

元素节点

nodeType:1
nodeName:大写的标签名（部分怪异模式下我想们写的是小写的就是小写的）
nodeValue:null
常用获取当前标签名方式是[cur.ele].tagName （获取的标签名一般都是大写）

文本节点

1
2
3

nodeType:3
nodeName:#text
nodeValue:文本内容

（高版本浏览器把空格和换行业当作文本节点）

注释节点

1
2
3

nodeType:8
nodeName:#comment
nodeValue:注释内容

document文档节点

1
2
3

nodeType:9
nodeName:#document文档节点
nodeValue:null

案例

<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!--我就是个注释-->
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    var oBox = document.querySelector('#box')
    console.log(oBox.childNodes)
    //所有节点NodeList(11) 
    //[text, ul, text, comment, text, div, text, div, text, div, text]
    console.log(oBox.children)
    //元素节点 [ul, div, div, div]
     console.log(oBox.children.length)
     // 4  IE8下是5（IE6-8获取的会把注释节点当作元素节点获取）
</script>

1、节点属性

Node.nodeName //返回节点名称，只读
Node.nodeType //返回节点类型的常数值，只读
Node.nodeValue //返回Text或Comment节点的文本值，只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写
Node.baseURI //返回当前网页的绝对路径
Node.childElementCount //返回当前节点所有Element子节点的数目。

2、描述节点和节点之间关系的一些节点属性

Node.childNodes //返回当前节点的所有子节点
//-> 注意:不仅仅是元素节点、文本节点、注释节点都包括在内，子节点只说明在儿子辈份中查找

Node.children //返回所有的元素子节点（元素集合 IE6-8获取的结果和标准浏览器有区别）
//->IE6-8获取的会把注释节点当作元素节点获取

Node.parentNode //返回当前节点的父节点（元素对象）
Node.previousSibling //返回当前节点前面的兄弟节点（不一定是元素节点也可能是文本和注释节点）
Node.previousElementSibling //返回当前节点前面的兄弟节点(元素节点)
Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点（不一定是元素节点也可能是文本和注释节点）
Node.nextElementSibling//返回紧跟在当前节点后面的第一个兄弟节点(元素节点)

Node.parentElement //返回当前节点的父Element节点
Node.ownerDocument //返回当前节点所在的顶层文档对象，即document
//->IE6-8不兼容

Node.firstChild //返回当前节点的第一个子节点（不一定是元素节点也可能是文本和注释节点）
Node.lastChild //返回当前节点的最后一个子节点（不一定是元素节点也可能是文本和注释节点）
Node.firstElementChild //返回当前节点的第一个Element子节点(元素节点 IE6-8不兼容)
Node.lastElementChild //返回当前节点的最后一个Element子节点(元素节点 IE6-8不兼容)

3、Document节点的方法

读写方法

document.open() //用于新建并打开一个文档
document.close() //不安比open方法所新建的文档
document.write() //用于向当前文档写入内容
document.writeIn() //用于向当前文档写入内容，尾部添加换行符

查找节点

document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementsByTagName(tagName
document.getElementsByClassName(className)
document.getElementsByName(name)
document.getElementById(id)

生成节点

document.createElement(tagName) //用来生成HTML元素节点。
document.createTextNode(text) //用来生成文本节点
document.createAttribute(name) //生成一个新的属性对象节点，并返回它。
document.createDocumentFragment() //生成一个DocumentFragment对象

事件方法

//生成一个事件对象，该对象能被element.dispatchEvent()方法使用
document.createEvent(type)
document.addEventListener(type,listener,capture) //注册事件
document.removeEventListener(type,listener,capture) //注销事件
document.dispatchEvent(event) //触发事件

4、节点操作

Node.appendChild(node) //向节点添加最后一个子节点
Node.hasChildNodes() //返回布尔值，表示当前节点是否有子节点
Node.cloneNode(false/true);
//-> 默认为false只克隆当前元素本身 true深度克隆把当前元素本身即左右后代元素都克隆
Node.insertBefore(newNode,oldNode)//插入节点
Node.removeChild(node) //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild) //替换节点
Node.contains(node) //参数节点是否为当前节点的后代节点。

//ChildNode接口
Node.remove() //用于删除当前节点
Node.before() //
Node.after()
Node.replaceWith()

5、Document节点的属性

document.doctype //
document.documentElement //返回当前文档的根节点
document.defaultView //返回document对象所在的window对象
document.body //返回当前文档的<body>节点
document.head //返回当前文档的<head>节点
document.activeElement //返回当前文档中获得焦点的那个元素。

//节点集合属性
document.links //返回当前文档的所有a元素
document.forms //返回页面中所有表单元素
document.images //返回页面中所有图片元素
document.embeds //返回网页中所有嵌入对象
document.scripts //返回当前文档的所有脚本
document.styleSheets //返回当前网页的所有样式表

//文档信息属性
document.documentURI //表示当前文档的网址
document.URL //返回当前文档的网址
document.domain //返回当前文档的域名
document.lastModified //返回当前文档最后修改的时间戳
document.location //返回location对象，提供当前文档的URL信息
document.referrer //返回当前文档的访问来源
document.title //返回当前文档的标题
document.characterSet返回当前文档的字符集，比如UTF-8
document.readyState //返回当前文档的状态
document.designMode //控制当前文档是否可编辑，可读写
document.compatMode //返回浏览器处理文档的模式
document.cookie //用来操作Cookie

6、Element节点的属性

特性属性

Element.attributes //返回当前元素节点的所有属性节点
Element.id //返回指定元素的id属性，可读写
Element.tagName //返回指定元素的大写标签名
Element.innerHTML //返回该元素包含的HTML代码，可读写
Element.outerHTML //返回指定元素节点的所有HTML代码可读写
Element.className //返回当前元素的class属性，可读写
Element.classList //返回当前元素节点的所有class集合
Element.dataset //返回元素节点中所有的data-*属性。

尺寸属性

Element.clientHeight //返回元素节点可见部分的高度
Element.clientWidth //返回元素节点可见部分的宽度
Element.clientLeft //返回元素节点左边框的宽度
Element.clientTop //返回元素节点顶部边框的宽度
Element.scrollHeight //返回元素节点的总高度
Element.scrollWidth //返回元素节点的总宽度
Element.scrollLeft //返回元素节点的水平滚动条向右滚动的像素数值
Element.scrollTop //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight //返回元素的垂直高度(包含border,padding)
Element.offsetWidth //返回元素的水平宽度(包含border,padding)
Element.offsetLeft //返回当前元素左上角的垂直偏移
Element.offsetTop //返回水平位移
Element.style //返回元素节点的行内样式

Element节点的方法

getBoundingClientRect()
// 返回一个对象包含top,left,right,bottom,width,height
// width、height 元素自身宽高
// top 元素上外边界距窗口最上面的距离
// right 元素右外边界距窗口最上面的距离
// bottom 元素下外边界距窗口最上面的距离
// left 元素左外边界距窗口最上面的距离
// width 元素自身宽(包含border,padding)
// height 元素自身高(包含border,padding)

getClientRects() //返回当前元素在页面上形参的所有矩形。

// 元素在页面上的偏移量
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}

属性方法

Element.getAttribute()：读取指定属性
Element.setAttribute()：设置指定属性
Element.hasAttribute()：表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性
//->使用xxx.index=0和xxx.setAttribute(index,0)这两种设置自定义属性的区别?
//->xxx.index:是把当前操作的元素当做一个普通对象，为其设置一个属性名(和页面中的HTML标签没关系)
//->xxx.settribute :把元素当做特殊的元素对象来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的

事件方法

Element.addEventListener()：添加事件的回调函数
Element.removeEventListener()：移除事件监听函数
Element.dispatchEvent()：触发事件

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event对象
var event = window.event||event;

// 事件的目标节点
var target = event.target || event.srcElement;

// 事件代理
ul.addEventListener('click', function(event) {
    if (event.target.tagName.toLowerCase() === 'li') {
        console.log(event.target.innerHTML)
    }
});

Element.scrollIntoView() //滚动当前元素，进入浏览器的可见区域

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString);
// 在该元素前插入
Element.insertAdjacentHTML('beforeBegin', htmlString);
// 在该元素第一个子元素前插入
Element.insertAdjacentHTML('afterBegin', htmlString);
// 在该元素最后一个子元素后面插入
Element.insertAdjacentHTML('beforeEnd', htmlString);
// 在该元素后插入
Element.insertAdjacentHTML('afterEnd', htmlString);

Element.remove() //用于将当前元素节点从DOM中移除
Element.focus() //用于将当前页面的焦点，转移到指定元素上

参考地址 http://www.cnblogs.com/ningmeng666/p/6749014.html