dom结构树
document -->HTMLDocument.prototype-->Document.prototype
document.body --> <body>~~<body>
document.head --> <head>~<head>
document.documentElement--><html>--<html>
dom基本操作
1.getElementByID方法定义在Document.prototype上，即Element节点上不能使用
2.getElementByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document Element）
3.getElementByTagName方法定义在Document.prototype和Element.prototype上
4.HTMLDocument.prototype定义了一下常用的属性，body，head，分别指代HTML文档中的<body><head>标签
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素
6.getElementByClassName，querySelectorAll , querySelector在Document.prototype, Element.prototype类中均有定义
- 封装函数，返回元素e的第n层祖先元素节点
<div>
<strong>
<span>
<i></i>
</span>
</strong>
</div>
function retParent(elem,n){
while(elem&n){
elem = elem.parentElement;
n --;
}
return elem;
}
var i = document.getElementByTagName('i')[0];
- 封装函数,返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。
<div>
<span></span>
<p></p>
<strong></strong>
<i></i>
<address></address>
</div>
function retSibling(e,n){
while(e&&n){
if(n>0){
e = e.nextElementSibling;
n --;
}else{
e = e.previousElementSibling;
n ++;
}
}
return e;
}
增
document.createElement();创建元素
document.createTextNode();创建文本
document.createComment();创建注释
document.createDocumentFragment();
插
parentNode.appendChild();剪切
parentNode.insertBefore(a,b);insert a before ba在b前面
<div>
<i></i>
<strong></strong>
<span></span>
</div>
i 和strong是后加的 span和 div是原始的 被选的
var div = document.getElementByTagName('div')[0];
var span = document.getElementByTagName('span')[0];
div.appendChild(span);
var strong = document.createtElement('strong');
var i = document.createElement('i');
div.insertBefore(strong,span);
div.insertBefore(i,strong);
删
parent.removeChild();剪切
child.remove();删除
替换
parent.replaceChild(new,origin);
- Element节点的一些属性
innerHTML获取内容 或者写入东西覆盖原本的内容 div.innerHTML = "123";
innerText(火狐不兼容)/textContent(老版本IE不好使)
Element节点的一些方法
ele.setAttribute('class','example');为元素设置行间属性
div.setAttribute('id','only')
ele.getAttribute();
div.getAttribute('id'); -->only - 如果要改的话 直接div.className='' div.id=''
<div>
<a href='#' data-log='0'>hehe</a>
</div>
var a = document.getElementByTagName('a')[0];
a.onclick = function(){
console.log(this.getAttribute('data-log'));
}
<div></div>
<span></span>
<strong></strong>
var all = document.getElementByTagName('*');
for (var i = 0 ; i<all.length; i ++){
all[i].setAttribute('this-name',all[i].nodeName);
}
- 封装函数insertAfter(); 功能类似insetBefore();
<div>
<i></i>
<b></b>
<span></span>
</div>
Element.prototype.insertAfter =
function(targetNode, afterNode){
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null){
this.appendChild(targetNode);
}else{
this.insertBefore(targetNode,beforeNode);
}
}
var b = document.getElementsByTagName('b')[0];
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
var p = document.createElement('p');
网友评论