加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。

DOM树

对于节点，可以分为“属性节点”和“内容节点”

节点

DOM对象是

window.document

简写为

document

关于DOM操作的常用API

js对象指的是DOM Element

关于Element操作的常用API

关于Attribute操作的常用API

1. DOM的操作

1.1 document.getElementById(id)

根据参数id获取对应的element对象

<div id="div1">哈哈</div>

var d1 = document.getElementById("div1"); // object  HTMLDivElement

1.2 document.getElementsByName(name)

根据参数name获取对应的element对象数组

<input type="radio" name="r1" value="1" />1
<input type="radio" name="r1" value="2" />2
<input type="radio" name="r1" value="3" />3

var r1 = document.getElementsByName("r1"); //object NodeList
for(var i = 0; i < r1.length; i++){
    alert(r1[i]); //object HTMLInputElement
}

1.3 document.getElementsByTagName(tag)

根据参数tagName获取对应标记名为tagName的所有标记组成的element对象数组
示例：获取页面上所有input标记组成的element数组

var t1 = document.getElementsByTagName("input");

1.4 document.createElement(tag);

创建一个element对象，对象不一定在页面上存在

<table id="tab1" width="800" border="1"></table>
<input type="button" value="添加" onclick="addRow();" />

<script type="text/javascript">
    function addRow(){
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        
        td1.innerHTML = "A";
        td2.innerHTML = "B";
        
        var tr = document.createElement("tr");
        tr.appendChild(td1);
        tr.appendChild(td2);
        
        var tab = document.getElementById("tab1");
        tab.appendChild(tr);
    }
</script>

2. Element的操作

2.1 element.appendChild(o)

将element对象o，添加到当前节点的结尾
示例参考1.4小节的示例

2.2 element.parentNode和element.children

element.parentNode获得当前对象的父节点
element.children 获取当前对象的所有子节点（element）组成的数组

<div id="div1">
    <ul id="ul1">
        <li id="li1"><a href="#">1</a></li>
        <li id="li2"><a href="#">2</a></li>
        <li id="li3"><a href="#">3</a></li>
    </ul>
</div>
<input type="button" value="ul的父元素" onclick="test1();"/>
<input type="button" value="ul的子元素" onclick="test2();"/>
<script type="text/javascript">
    function test1(){
        var ul = document.getElementById("ul1");
        var p = ul.parentNode;
        alert(p.id);
    }
    function test2(){
        var ul = document.getElementById("ul1");
        var cs = ul.children;
        for(var i = 0; i < cs.length; i++){
            alert(cs[i].id);
        }
    }   
</script>

2.3 element.getAttribute(a)和element.getAttribute(a,x)

获取element对象的a属性的值

<table id="tab1" width="800" border="1"></table>
<input type="button" value="获取tab的width" onclick="getWidth();" />

function getWidth(){
    var tab = document.getElementById("tab1");
    var w = tab.getAttribute("width");
    alert(w);
}

这种写法比较繁琐，一般简化为

function getWidth(){
    var tab = document.getElementById("tab1");
    var w = tab.width;
        alert(w);
}

<td width="800" bgcolor="#FF0000">
标记上的width对应JS中width
标记上的bgcolor对应JS中bgColor
示例：设置width是1000

var tab = document.getElementById("tab1");
tab.setAttribute("width", "1000");

可以使用简略方式

var tab = document.getElementById("tab1");
tab.width = 1000;

2.4 element.innerHTML和element.innerText

获取和设置element的内容
获取内容

• innerHTML将HTML标记也显示出来
• innerText只显示文本忽略HTML标记

<div id="div1">
    <b>东软睿道</b>可好了
</div>
<input type="button" value="获取HTML" onclick="test1();" />
<input type="button" value="获取文本" onclick="test2();" />
<script type="text/javascript">
    function test1(){
        var div = document.getElementById("div1");
        var txt = div.innerHTML;
        alert(txt);
    }
    function test2(){
        var div = document.getElementById("div1");
        var txt = div.innerText;
        alert(txt);
    }
</script>

设置内容

<div id="div1"></div>
<input type="button" value="设置HTML" onclick="test3();" />
<input type="button" value="设置文本" onclick="test4();" />
<script type="text/javascript">
    function test3(){
        var div = document.getElementById("div1");
        div.innerHTML="H<sub>2</sub>O";  //H2O 解析HTML
    }
    function test4(){
        var div = document.getElementById("div1");
        div.innerText="H<sub>2</sub>O"; //H<sub>2</sub>O
    }
</script>

2.5 element.removeChild(x)

移除子节点x

<div id="div1">
    <ul id="ul1">
        <li id="li1"><a href="#">1</a></li>
        <li id="li2"><a href="#">2</a></li>
        <li id="li3"><a href="#">3</a></li>
    </ul>
</div>
<input type="button" value="移除子节点" onclick="test3();"/>

<script type="text/javascript"> 
    function test3(){
        var ul = document.getElementById("ul1");
        var cs = ul.children;
        ul.removeChild(cs[1]);
    }   
</script>

2.5 element.removeAttribute(x)

移除element的x属性
示例：移除<font>标记的color属性

<font color="coral" face="华文彩云" size="32" id="ft1">一段测试文字</font>
<input type="button" value="移除颜色" onclick="test1();" />
<script type="text/javascript">
    function test1(){
        var ft = document.getElementById("ft1");
        ft.removeAttribute("color");
    }
</script>

2.6 element.style内联样式控制

style属性中的内联样式可能会设置很多，需要通过style.css属性名的方式进行控制
书写规则：

设置div1的背景颜色设置为红色

document.getElementById("div1").style.backgroudColor="#FF0000";

获取div1的当前背景颜色设置(内联)

var c = document.getElementById("div1").style.backgroudColor;