javascript---28--DOM文档对象模型

节点

什么是节点

你好是文本节点
<div>元素节点
class id value是属性节点
注释节点

获取节点

ele.childNodes获取元素节点+ 文本节点但是只获取子代不能获取孙子代

<div id="wrap">
        <div class="position">
            <div id="box">
            你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
        </div>
    </div>
<script>
    var oBox =document.getElementById("box");
    console.dir(oBox);
</script>

结果childNodes:NodeList(7) 有七个其中text有的代表是空格

ele.child只获取元素节点但是只获取子代不能获取孙子代

console.dir(oBox.children);

HTMLCollection(3)0: span1: p2: ullength: 3__proto__: HTMLCollection

firstChild只获取第一个节点包括文本节点（空格）和注释节点空格

console.dir(oBox.firstChild);

结果#text

firstElementChild获取第一个元素节点

console.dir(oBox.firstElementChild);

结果是span

lastChild只获取最后一个节点

console.dir(oBox.lastChild);

结果#text

lastElementChild获取最后一个元素节点

console.dir(oBox.lastElementChild);

结果ul

获取兄弟节点

nextSibling获取到的是下一个兄弟节点不换行就是空格

var oSpan =document.getElementsByTagName("span")[0];
    console.dir(oSpan.nextSibling);

结果#text

nextElementSibling获取兄弟元素节点

console.dir(oSpan.nextElementSibling);

结果是p

console.dir(oSpan.nextElementSibling.nextElementSibling);

结果是ul 可以组合使用

3.previousSibling 获取上一个兄弟节点包括文本和注释节点

console.dir(oSpan.previousSibling);

结果#text

previousElementSibling获取上一个兄弟元素节点

console.dir(oSpan.previousElementSibling);

结果返回null

获取父节点

parentNode 获取父节点

console.dir(oSpan.parentNode);

结果是div#box 2.获取父节点的兄弟节点

<div id="wrap">
        <div class="position">
            <div id="box">你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
            <div id="main"></div>
        </div>
    </div>
    var oSpan =document.getElementsByTagName("span")[0];
console.dir(oSpan.parentElement.nextElementSibling);

结果div#main

获取定位父级节点offsetParent) 如果父级没有定位或者自己没有定位找的是body

#wrap{
            position: relative;
        }
        #box{
            position: absolute;
        }
 var oBox =document.getElementById("box");
    console.dir(oBox.offsetParent);

结果是div#wrap

获取子元素的数量

1.childElementCount获取子元素的个数孙元素不算

console.log(oBox.childElementCount);

结果为3

删除节点

removeChild（节点属性）只能从父级开始删除不能自己删除自己

创建节点

createElement 创建元素节点创建完节点可以直接进行dom操作
appendChild 添加节点只能从父级节点开始添加在最后添加节点

<body>
    <div id="wrap">
        <div class="position">
            <div id="box">你好
            <span>22</span>
            <p>333</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            </div>
            <div id="main"></div>
            </div>
        </div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    var oP =document.createElement("p");
    oP.innerHTML ="我是一个p";
    oP.onclick = function(){
        alert(1);
    }
    oBox.appendChild(oP)
</script>

创建文本节点 createTextNode

var text = document.createTextNode("我很好");
 oBox.appendChild(text);

与oBox.innerHTML +="我很好";效果一样但是这样做之前绑定的事件会失效

替换节点replaceChild 前面（第一个）是新的元素，后面是旧节点

var oBox =document.getElementById("box");
    var oSpan =document.getElementsByTagName("span")[0];
    var oSpan2 =document.createElement("span");
    oSpan2.innerHTML ="我是新的";
    oBox.replaceChild(oSpan2,oSpan);

这样22就替换成我是新的

添加节点但是不替换insertBefore 第一个是插入的新元素，后面是那个节点（前添加节点）

var oBox =document.getElementById("box");
    var oSpan =document.getElementsByTagName("span")[0];
    var oSpan2 =document.createElement("span");
    oSpan2.innerHTML ="我是新的";
    oBox.insertBefore(oSpan2,oSpan);

在22前面我是新的

克隆节点 cloneNode() 克隆只克隆元素本身还有元素节点，不会克隆事件括号里可以接受一个布尔类型，true就是克隆子孙元素

<body>
    <div id="wrap">
    <div class="box">nnn</div>
    </div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.onclick =function () {
        alert(1);
    }
    var oBox2 =oBox.cloneNode();
    oBox2.innerHTML ="我是克隆";
    wrap.appendChild(oBox2)

结果只有点击nn才会有弹窗，点击“我是克隆”没有弹窗

<body>
    <div id="wrap">
    <div class="box">nnn
        <h2>子孙</h2>
    </div>
    </div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.onclick =function () {
        alert(1);
    }
    var oBox2 =oBox.cloneNode(true);
    wrap.appendChild(oBox2)

结果是nnn 子孙 nnn 子孙内容复制

清除空隙

浮动或变块
父级字体font-size为0
加注释
删除子代文本节点

<style>
       p{
           display: inline-block;
           width: 100px;
           height: 100px;
           background-color: #ff6666;
       }
    </style>
</head>
<body>
    <p>111</p>
    <p>222</p>
</body>
 var oDiv =document.getElementsByTagName("body")[0];
    for (var i=0;i<oDiv.childNodes.length;;i++){
        if (oDiv.childNodes[i].nodeName==="#text"){
            oDiv.removeChild(oDiv.childNodes[i]);//长度会变childNodes.length;
        }
    }

这样就删除空格

节点属性

getAttribute(节点名称) 返回的是值

<body>
   <div class="box"></div>
</body>
<script>
   var oBox =document.getElementsByClassName("box")[0];
   console.log(oBox.getAttribute("class"))

结果是box

返回节点对象getAttributeNode

var oBox =document.getElementsByClassName("box")[0];
   console.dir(oBox.getAttributeNode("class"))

设置节点属性setAttribute setAttributeNode

oBox.setAttribute("name","hu");

就会添加节点名称

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");//创建节点对象
   attr.value =1;//赋值
   oBox.setAttributeNode(attr);

就会添加节点属性index=1

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(oBox.nodeName);

结果是div

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(attr.nodeName);

结果是index

var oBox =document.getElementsByClassName("box")[0];
   var attr =document.createAttribute("index");
   attr.value =1;
   oBox.setAttributeNode(attr);
  console.log(attr.tagName);

结果是undefined 因为tagname是元素节点才有 nodename是所有节点都有

节点类型 nodeType

3 #text 文本节点
8 #comment 注释节点
1 元素节点（span ul p ）
9 文档节点

删除节点属性removeAttribute

var oBox =document.getElementsByClassName("box")[0];
   oBox.setAttribute("name","hu");
   oBox.removeAttribute("name");

小练习通过节点是唯一的写点击添加菜单

<style>
        div{
            float: left;
            width: 200px;
            min-height: 400px;
            padding: 10px;
            margin: 20px;
            border: 1px solid #000;
            text-align: center;
        }
        div h2{
            border-bottom: 1px solid #000;
        }
        div span{
            display: block;
            height: 30px;
            background-color: #000;
            font-size: 16px;
            color: #fff;
            line-height: 30px;
            cursor: pointer;
        }
        div span +span{
            margin-top: 10px;
        }
        div span:hover{
            opacity: .5;
        }
    </style>
</head>
<body>
        <div id="menue">
            <h2>菜单</h2>
            <span>西红柿炒鸡蛋</span>
            <span>爆炒牛肉</span>
            <span>土豆丝</span>
            <span>肉末豆腐</span>
            <span>鱼香肉丝</span>
            <span>水煮肉片</span>
        </div>
       <div id="select">
           <h2>已点</h2>
       </div>
</body>
<script>
    var oMenu =document.getElementById("menue"),
        oSelect =document.getElementById("select"),
        oSpan =document.getElementsByTagName("span");
        for (var i=0;i<oSpan.length;i++){
            oSpan[i].onclick =function () {
                this.selectStatu =!this.selectStatu;//取反，一开始没有定义是undefined,取反之后变为真
                if (this.selectStatu){
                    oSelect.appendChild(this);
                } else{
                    oMenu.append(this);
                }
            }
        } 
</script>

通过注释节点添加图片

<body>
    <div id="hidden">

            <!--
            <div class="pic">
                <img src ="1.jpg">
            </div>
            -->
    </div>
    <div id="box"></div>
</body>
<script>
    document.onclick =function () {
        box.innerHTML =hidden.childNodes[1].nodeValue;
    }