HTML DOM

简介

---

• HTML DOM 定义了访问和操作 HTML 文档的标准方法。
• DOM 将 HTML 文档表达为树结构
• 作用：获取、修改、添加或删除 HTML 元素。
• 实现功能：

1. 贴吧的ul下面动态增加减少li的沙发动态的增加减少；
2. 动态操作聊天功能；

• 内容：节点：文档节点、文本节点（换行，文字）、注释节点、元素节点（标签） 节点的属性和方法： 

获取节点：

document是内存自动创建的，是dom的最底层的对象；

var obody = document.body;

通过childNodes获得所有的子节点对象，包括元素节点、属性节点、文本节点；

var nodearr = obody.childNodes;
        console.info(nodearr);
        console.info(nodearr.length);
        console.info(nodearr[i].nodeType);
        所有的标签都是元素节点，换行是文本节点，元素节点返回值是1   文本节点返回值是3  属性节点返回2

• 获取子节点，不包括文本节点： children【获取所有子元素中的元素节点】
• childnodes与children的区别：前面换行也计算在内；

var oul = document.getElementById("ul");
            var childArr = oul.children;
            for(var j=0;j<childArr.length;j++){
                console.info(childArr[j].nodeName)
            }

【兼容问题】firstChild在IE下获取到的第一个元素节点，DOM浏览器下面获取到的是第一个子节点；

【解决方案】：
     var node = oul.firstElementChild || oul.firstChild;
     console.info(node.nodeName);

获取节点其他方式：

获取到最后一个子节点
var oli = oul.lastElementChild;
            
获取到前一个兄弟节点：previousElementSibling;
var node2 = oul.previousElementSibling;

获取到后一个兄弟节点：nextElementSibling；
var node3 = oul.nextElementSibling;

获取到父节点：parentNote；
var oli1 = document.getElementById("li1");
var node4 = oli1.parentNode;

获取到定位父级：该父级必须设置postion，  offsetParset；
var odiv =document.getElementById("div3");
var node5 = odiv.offsetParent;

创建节点：

第一步:创建节点

var oli2 = document.createElement("li");
oli2.innerHTML = "韦德"；     innerHTML ：中间的值

第二步：将创建好的节点放入dom树中

oul.appendChild(oli2);	加入进去；
oul.insertBefore(oli2,oli1);  进行排序；


【细节】：获取li中的值，要首先得到li中的文本节点再获得值；nodevalue只针对文本节点；
oli2.firstChild.nodevalue;

操作案例：

创建聊天环境： 增加聊天记录删除功能：用a标签增加href的javaScript： innerHTML 为管理所有的div； 增加标签：op.appendChild(oa);

odiv.innerHTML = ""; 直接删除整个div的元素；

属性：attribute

---

得到某个元素的所有属性

特点：获取的属性跟元素设置的顺序相反；
    <div id="div1" style="width: 100px;height: 100px;background-color: #007bc5"  title=""></div>

    var odiv = document.getElementById("div1");
    var attrArr = odiv.attributes;

增加属性：

odiv.setAttribute("name","test");
    odiv.setAttribute("class","na");

删除属性：

odiv.removeAttribute("title");

获取指定的属性值：

方式1：
    var str = odiv.getAttribute("style");
    console.info(str);
方式2：
    console.info(odiv.style);
    该方法一定要有一个确定的标签元素
    修改设置这个属性值：
    odiv.style="width:200px;height:200px;background-color:red;";

文本节点textNode

---

主要功能：

修改li中的文字以前要直接删除li会把原来设置的样式一起删除了，要从新设置很麻烦

获取文本：

var textNode = document.createTextNode("杜兰特"); 添加的文本内容
var oli = document.getElementById("ul").firstElementChild;  添加对象；

增加操作

方式1：oli.appendChild(textNode)     添加内容
    oli.insertBefore(textNode,oli.firstChild);     插入在之前
appendChild  插入到节点中；


方式2：oli.firstChild.appendData("~\(≧▽≦)/~"); 
/*方式2默认将内容放在当前节点后面 即textNode后面*/
appendData  插入数据值；

增加文本到指定位置：

var oli2 = document.getElementById("ul").lastElementChild;
    oli2.firstChild.insertData(2,"mm");  
    第一个参数是位置，第二个参数内容*/

删除文本在指定位置：

oli2.firstChild.deleteData(2,0);                               /*第一个参数表示开始位置，第二个参数表示长度*/

替换文本在制定位置

oli2.firstChild.replaceData(0,2,"**");
/*第一个参数位置，第二个参数长度，第三个参数替换的内容*/

表格操作：

---

<table border="1" id="mytable">
    <tr>                tr行
        <th>名车</th>   th：第一列抬头
        <th>名人</th>
        <th>球星</th>
    </tr>
    <tr>
        <td>保时捷</td> td：列
        <td>王力宏</td>
        <td>韦德</td>
    </tr>
</table>

获得对象：

var otable = document.getElementById("mytable");

增加行：insertRow(2); 增加第三行

var otr = otable.insertRow(2);

增加td：old = insertCell（0）；增加第三行第一列；

var otd1 = otr.insertCell(0);
    var nodeText = document.createTextNode("法拉利");
    otd1.appendChild(nodeText);
    
    var otd2 = otr.insertCell(1);
    var nodeText2 = document.createTextNode("高圆圆");
    otd2.appendChild(nodeText2);

     var otd3 = otr.insertCell(2);
    var nodeText3 = document.createTextNode("罗纳尔多");
    otd3.appendChild(nodeText3);

删除行列：

otable.deleteRow(1);
    otr.deleteCell(0);

访问表格：

获取所有的行；

var ro = otable.rows;
    console.info(ro);
    
    otable.children//传统方法；

循环遍历行

for(var i=0;i<otable.rows.length;i=i+2){
    otable.rows[i].style.backgroundColor = "red";

获取所有列：在所有行中遍历找到所想要的列；

for(var i=0;i<otable.rows.length;i=i+2){
        otable.rows[i].style.backgroundColor = "red";
        for(var j=0;j<otable.rows[i].cells.length;j=j+2){
            otable.rows[i].cells[j].style.backgroundColor = "orange";
        }
    }

补充

---

<ul id="ul">
        <li class="li1">韦德</li>
        <li>科比</li>
        <li>杜兰特</li>
    </ul>
    <input type="text" name="username"/>

节点替换：replaceChild

var oli = document.createElement("li");
    var textNode = document.createTextNode("詹姆斯");
     oli.appendChild(textNode);
       /*替换节点，杜兰特*/
        var oul = document.getElementById("ul");
        var lastLi = oul.lastElementChild;
        /*第一个参数 要替换的li内容，第二个参数是目标li*/
        oul.replaceChild(oli,lastLi);

克隆节点：cloneNode（true）；

//ture为深克隆， false为浅克隆

var newli = oli.cloneNode(false);
oul.appendChild(newli);

JS的节点选择器

/*通过class找到节点*/
        var oli1 = document.getElementsByClassName("li1");
        console.info(oli1);
        oli1[0].style.backgroundColor = "pink";

        /*通过name属性找元素*/
        var oinp = document.getElementsByName("username");
        console.info(oinp)
        oinp[0].style.backgroundColor = "green";


        /*通过元素找节点*/
        var ularr = document.getElementsByTagName("ul");

单选框设置勾选状态：

是否被选中：checked = “checked”；

<input type="checkbox" checked="checked"/>

全部选中

var inparr = document.getElementsByTagName("input");
        for(var i=0;i<inparr.length;i++){
            inparr[i].checked =true;
        }