当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
DOM常用方法:
1、通过 id 查找 HTML 元素 getElementById()
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
实例
本例查找 id="intro" 元素:
var x=document.getElementById("intro");
实例
本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
注意:getElementsByTagName()返回的是数组。
实例
本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
实例
本例查找 name="main" 的元素:
var x=document.getElementsByName("main");
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
实例
<div id="div1"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>
如需删除 HTML 元素,您必须首先获得该元素的父元素:
实例
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>
这个方法支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的所有子节点,包括该节点内的文本。
实例
<p id="mypara">11111</p> <script>p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>
实例
<div id="adiv"><span id="innerspan">span</span></div><script type="text/javascript">
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>
实例
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script>
<input type="text" id="ip" />
<script>
var element=document.getElementById("ip");
element.createAttribute("readOnly");
</script>
<input type="text" id="ip" /> <script> var element=document.getElementById("ip"); element.setAttribute("type","button"); </script>
<input type="text" id="ip" /> <script> var element=document.getElementById("ip"); element.getAttribute("type"); </script>
实例
<div id="test" οnclick='wow()'>hhh</div>
<script type="text/javascript">
var div = document.getElementById("test");
div.click();
function wow() {
alert("test");
}
</script>
实例
<table id="mylist">
<tr><td>一个和尚有水喝。</td></tr>
<tr><td>两个和尚挑水喝。</td></tr>
<tr><td>三个和尚没水喝。</td></tr>
</table>
<script>
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var tr=mylist.childNodes[i];
for(j=0;j<tr.childNodes[j].length; j++) {
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
</script>
实例
<p><b>aaaaa</b></p>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>bbbbb</b>"
}
</script>
实例
<p id='test'>Hello World</p>
<script type="text/javascript">
document.getElementById("test").style.backgroundColor="yellow"
}
</script>
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url 返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)