Document对象的常⽤⽅法
1、getElementById(id)
通过元素的ID访问元素，这是DOM⼀个基础的访问页⾯元素的⽅法，我们要经常⽤到它.
例如下⾯的例⼦，我们可以同DIV的ID迅速的访问到它，⽽不必通过DOM层层遍历，
<body>
<div id=’divid’><p>h</p>
Just for testing;
</div>
<div id=’divid’>
Just for testing;
</div>
<script>
var ElementById(‘divid’);
deName);
</script>
</body>
注意使⽤这个函数时如果元素的ID不是唯⼀的，那么会获得第⼀个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也会被访问到
例如下⾯的例⼦中，获得的元素是input：
<body>
<input name='divid' type="text"/>
<div id='divid'>
Just for testing;
</div>
<script>
var ElementById('divid');
deName);
</script>
</body>
2、getElementsByName(name)
返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，⽽且getElementsByName()仅⽤于
象input,radio,checkbox等元素对象。
象下⾯例⼦中georges数组的长度应该是0。
<body>
<div name="george">f</div>
<div name="george">f</div>
<script type="text/javascript">
var ElementsByName("george");
alert(georges.length);
</script>
</body>
3、getElementsByTagName(tagname)
getElementByTagName可以⽤于DOCUMENT也可以⽤元素。getElementsByTagName返回具有指定tagname的⼦元素列表（数组）。你可以遍历这个数组获得每⼀个单独的⼦元素。当处理很⼤的DOM结构，使⽤这种⽅法可以很容易的所有缩⼩范围。
<html>
<head>
<title></title>
<script>
function start() {
// 获得所有tagName是body的元素（当然每个页⾯只有⼀个）
ElementsByTagName("body");
myBody=myDocumentElements.item(0);
// 获得body⼦元素种的所有P元素
ElementsByTagName("p");
// 获得第⼆个P元素
myP=myBodyElements.item(1);
//显⽰这个元素的⽂本
alert(deValue);
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>
DOM Element 常⽤⽅法
1、appendChild(node)
向当前节点对象的追加节点。经常⽤于给页⾯动态的添加内容。
例如下⾯给div添加⼀个⽂本节点：
<div id="test"></div>
<script type="text/javascript">
var ateElement("div")
var ateTextNode("A new div")
newdiv.appendChild(newtext)
</script>
上⾯的例⼦中给DIV添加⽂本，也可以⽤newdiv.innerHTML=”A new div”实现，
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的⼦节点，返回被移除的节点。这个被移除的节点可以被插⼊document树中别的地⽅
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var ElementById("child")
var ElementById("father").removeChild(childnode)
</script>
3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点，这个复制得到的节点是⼀个孤⽴的节点，不在document树中。复制
原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，⼀定要修改ID属性，以便使它保持唯⼀。当然如果ID的唯⼀性不重要可以不做处理。
这个⽅法⽀持⼀个布尔参数，当deepBoolean设置true时，复制当前节点的所有⼦节点，包括该节点内的⽂本。
<p id=”mypara”>11111</p>
ElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4、replaceChild(newChild, oldChild)
把当前节点的⼀个⼦节点换成另⼀个节点
例如：
<div id="adiv"><span id="innerspan">span</span></div>
<script type="text/javascript">
var ElementById("innerspan");
var ateElement("p");
var ateTextNode(“ppppp”);
newel.appendChild(text);
</script>
5、insertBefore(newElement, targetElement)
给当前节点插⼊⼀个新节点，如果targetElement被设置为null，那新节点被当作最后⼀个⼦节点插⼊，否则那新节点应该被插⼊targetElement之前的最近位置。
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var ElementById("lovespan")
var ateElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";
</script>
6、click()
执⾏元素的⼀次点击，可以⽤于通过脚本来触发onClick函数
<script>
function wow() {
alert("我好象没有点⿏标啊");
}
html document是什么</script>
<div id="test" onclick='wow()'>hhh</div>
<script type="text/javascript">
var div = ElementById("test");
div.click();
</script>
DOM Element的属性:（下⾯是常⽤的。IE5.0以上,mozllia都⽀持的）
1、childeNodes  返回所有⼦节点对象,
例如
<table id="mylist">
<tr><td>⼀个和尚有⽔喝。</td></tr>
<tr><td>两个和尚挑⽔喝。</td></tr>
<tr><td>三个和尚没⽔喝。</td></tr>
</table>
<script>
var msg=””
var ElementById("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>
2、innerHTML
这是⼀个事实上的标准，不属于w3c DOM，但是⼏乎所有⽀持DOM的浏览器，都⽀持这个属性。通过这个属性我们很容易修改⼀个元素的HTML。
<p><b>新⼈类，什么？！</b></p>
<script type="text/javascript">
}
</script>
3、style
返回⼀个元素的style对象的引⽤，通过它我们可以获得并修改每个单独的样式。
例如下⾯的脚本可以修改⼀个元素的背景⾊
4、firstChild    返回第⼀个⼦节点
5、lastChild    返回最后⼀个⼦节点
6、parentNode  返回⽗节点的对象。
7、nextSibling  返回下⼀个兄弟节点的对象
8、previousSibling 返回前⼀个兄弟节点的对象
9、nodeName 返回节点的HTML标记名称，使⽤英⽂的⼤写字母，如P, FONT
例如
<div id='test'>ddd</div>
<script>
if (ElementById("test").nodeName=="DIV")
alert("This is a DIV");
</script>
第⼀个例⼦：
使⽤DOM1.0  的javascript动态地创建⼀个HTML table。
<head>
<title>Sample code </title>
<script>
function start() {
//获得body的引⽤
var ElementsByTagName("body").item(0);
//创建⼀个<table></table>元素
mytable = ateElement("TABLE");
//创建⼀个<TBODY></TBODY>元素
mytablebody = ateElement("TBODY");
// 创建⾏列
for(j=0;j<3;j++) {
/
/创建⼀个<TR></TR>元素
mycurrent_ateElement("TR");
for(i=0;i<3;i++) {
//创建⼀个<TD></TD>元素
mycurrent_ateElement("TD");
//创建⼀个⽂本元素
ateTextNode("cell is row "+j+", column "+i);                //把新的⽂本元素添加到单元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到⾏TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把⾏TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。