<head>
<meta charset="utf-8">
<title>dom继承树</title>
<style type="text/css">
#only{
font-size:20px;
color:#fff;
background-color:orange;
}
</style>
</head>
<body>
<!-- <div>
<b></b>
abc -->
<!-- this is commet -->
<!-- <strong>
<span>
<i></i>
</span>
</strong>
</div> -->
<!-- 3 -->
<!-- <div>
<span></span>
<p></p>
<strong></strong>
<i></i>
<address></address>
</div> -->
<!-- DMO基本操作 -->
<!-- <div>
<span>1234</span>
<a href="#" data-log="0">heheehe</a>
</div> -->
<!-- 封装insertAfter() -->
<!-- <div>
<i></i>
<b></b>
<span></span>
</div> -->
<script type="text/javascript">
例1
// document--->HTMLdocument--->Document.prototype//原型链
// HTMLDocument.prototype = {
// __proto__:Document.prototype
// }
例2
// var div = document.getElementsByTagName('div')[0];
// var span = div.getElementsByTagName('span')[0];//调用span
// 1.遍历元素节点树（在原型链上编程）
2.封装函数，返回元素的第n层祖先节点
// function retParent(elem,n){
// while(n) {
// elem = elem.parentElement;
// n --;
// }
// return elem;
// }
// var i = document.getElementsByTagName('i')[0];
3.封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。
// function retSibling(e,n) {
// while(e && n) {
// if(n>0) {
// if(e.nextElementSibling){
// e = e.nextElementSibling;
// }else{
// for(e =e.nextSibling; e&&e.nodeType != 1;e = e.nextSibling);//拓展用法//null没有nodeType,所以会报错，所以还要判断e是否有价值
// }
// n --;
// }else{
// if(e.previousElementSibling){
// e = e.previousElementSibling;
// }else{
// for(e =e.previousSibling; e&&e.nodeType != 1;e = e.previousSibling);//拓展用法//null没有nodeType,所以会报错，所以还要判断e是否有价值
// }
// }
// n ++;
// }
// return e;
// }
// var strong = document.getElementsByTagName('strong')[0];
4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题
// Element.prototype.myChildren = function(){//在原型链上编程
// var child = this.childNodes;
// var len = child.length;
// var arr = [];
// for(var i = 0;i <len; i++) {
// if(child[i].nodeType == 1){
// arr.push(child[i]);
// }
// }
// return arr;
// }
// var div = document.getElementsByTagName('div')[0];
DOM基本操作
增、插、删、替换
增
// 1.创建元素节点--document.createElement();
// var div = document.createElement('div');
// 2.创建文本节点--document.createTextNode();
// var text = document.createTextNode('虎仔');
// 3.创建注释节点--document.createComment();
// 4.document.creatDocumentFragment();
插
// PARENTNODE.appendChild();//任何一个元素节点都有appendChild方法类似于.push
// 例子
// var div = document.getElementsByTagName('div')[0];
// var text = document.createTextNode('虎仔');
// var span = document.createElement('span');
// div.appendChild(text);
// div.appendChild(span);
// var text1 = document.createTextNode('demo');
// span.appendChild(text1);
// span.appendChild(text);//把div里面的text剪切过来
// PARENTNODE.inserBefore(a,b);//
// 例子
// var div = document.getElementsByTagName('div')[0];
// var span = document.getElementsByTagName('span')[0];
// var strong = document.createElement('strong');
// div.insertBefore(strong,span);
// var i = document.createElement('i');
// div.insertBefore(i,strong);
// var p = document.createElement('p');
// var div = document.getElementsByTagName('div')[0];
删
// parent.removeChild();//被剪切出来
// div.removeChild(i);
// child.remove();销毁自身
替换
// parentNode.replaceChild(new , origin);
Element元素节点的一些属性
// innerHTML
// innerText/textContent
Element节点的一些方法
// ele.setAttribute()
// ele.getAttribute();
data-log用法
// var div = document.getElementsByTagName('div')[0];
// var a = document.getElementsByTagName('a')[0];
// a.onclick = function() {
// console.log(this.getAttribute('data-log'));
// }
例子1，让行间属性this-name的属性值为标签名nodeName
// var all = document.getElementsByTagName('*');
// for(var i = 0;i<all.length; i++) {
// all[i].setAttribute('this-name',all[i].nodeName);
// }
例子2--写一段javascript脚本生成DOM结构，使用标准的DOM方法或属性。
// var div = document.createElement('div');
// var p = document.createElement('p');
// div.setAttribute('class','example');
// p.setAttribute('class','slogan');
// var text = document.createTextNode('幺幺');
// p.appendChild(text);
// div.appendChild(p);
// document.body.appendChild(div);
例子3--封装函数insertAfter();功能类似insertBefore();
// Element.prototype.insertAfter = function(targetNode,afterNode) {
// var beforeNode = afterNode.nextElementSibling;
// if(beforeNode == null) {
// this.appendChild(targetNode);
// }else{
// this.insertBefore(targetNode,beforeNode);
// }
// }
// var div = document.getElementsByTagName('div')[0];
// var b = document.getElementsByTagName('b')[0];
// var span = document.getElementsByTagName('span')[0];
// var p = document.createElement('p');
</script>
</body>
