HTML DOM

来源：互联网发布：淘宝网店的押金怎么退编辑：程序博客网时间：2024/05/10 18:51

简介

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

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

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

获取节点：

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;        }

0 0