加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。
DOM树
对于节点，可以分为“属性节点”和“内容节点”
节点
DOM对象是
window.document
简写为
document
关于DOM操作的常用API
| 函数 | 用途 |
|---|---|
| getElementById("id") | 根据id获取标记的js对象 |
| getElementsByName("name") | 根据name获取标记的js对象数组 |
| getElementsByTagName("tag") | 根据tag（标记）名获取标记的js对象数组 |
| createElement("tag") | 创建某个标记 |
js对象指的是DOM Element
关于Element操作的常用API
| 函数 | 用途 |
|---|---|
| appendChild(o) | 为节点添加一个新的element |
| children | 得到节点的子节点组成数组 |
| getAttribute(a) | 得到某个属性a的值 |
| innerHTML | 得到节点中的文本内容 |
| parentNode | 得到节点的父节点的element |
| removeAttribute(a) | 移除属性a |
| removeChild(a) | 移除子节点a |
| setAttribute(a,x) | 替换属性a的值为x |
关于Attribute操作的常用API
| 函数 | 用途 |
|---|---|
| name | 属性的名字 |
| value | 属性的值 |
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属性名的方式进行控制
书写规则：
| CSS属性 | style.xxx |
|---|---|
| color | style.color |
| background-color | style.backgroudColor |
| mask-source-type | style.maskSourceType |
设置div1的背景颜色设置为红色
document.getElementById("div1").style.backgroudColor="#FF0000";
获取div1的当前背景颜色设置(内联)
var c = document.getElementById("div1").style.backgroudColor;
网友评论