dom继承树，dom基本操作

作者: 浮巷旧人 | 来源:发表于2018-08-06 00:12 被阅读0次

dom继承树，dom基本操作
DOM继承树,DOM基本操作
DOM（文档对象模型）
11 js06 DOM
DOM基本操作和DOM结构树
实现一个简易的虚拟DOM
[JavaScript] (Day-18) - 操作表单
Chrome DevTools
DOM增删改查基本操作
document.createDocumentFragment

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');