1. document.getElementById(id)//通过元素的ID访问元素.
注意:如果使用这个函数时Id不是唯一的,那么将会获得第一个符合条件的元素
2. document.getElementById(id).innerHTML//访问id元素的内部文本(包括内部存在的标签
例如:
Html文件:
<div id="divid"><p>h</p>
Just for testing
</div>
<div id="divid">Just for testing too</div>
</div>
Alert(document.getElementById("divid").innerHTML);//此时返回<p>h</p> Just for testing
3. document.getElementById(id).innerText//访问id元素内部的文本(不包括标签)
上例中: Alert(document.getElementById("divid").innerText);//此时返回h Just for testing
4.document.getElementById(id).outerHTML//f返回包括本身的文本(包括标签)
上例中: Alert(document.getElementById("divid").outerHTML);//此时返回<div id="divid"><p>h</p> Just for testing</div>
5. document.getElementById(“divid”).outerText;//此时返回值和innertext一致
6. document.getElementById(id).nodeName.//返回节点名.即返回div
7. document..getElementsByName(name)//返回名字是name元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementByName仅用于像input,radio,checkbox等元素对象.
像例二中若使用Alert(document.getElementsByName(“divid”).length);则返回0
8. document.getElementsByTagName(tagName);//返回带有tagName标签的列表
document.getElementsByTagName(tagName).item(index)//返回上面标签列表的第一个元素
document.getElementsByTagName("div").item(0).firstChild;//返回上面标签的第一个元素的子节点(就是定位到节点里面).
document.getElementsByTagName("div").item(0).firstChild.nodeValue//返回节点值
例子:
Html文件:
<input name="divid" id="yes" type="text"/>
<div name="divid">h
Just for testing
</div>
<div name="divid">Just for testing too</div>
</div>
<script>
alert(document.getElementsByTagName("div").item(0).firstChild.nodeValue);
</script>
输出:h Just for testing
DOM Element常用的方法
1.appendChild(node)
向当前节点追加节点.
举例:
HTML文件:
var childNode = document.createElement("tagName");
var childText = document.createTextNode("回复|");
childNode.appendChild(childText);
document.getElementById(s).appendChild(childNode);
2.removeChild(childreference)
移除当前节点的子节点
var childnode=document.getElementById("child");var removednode=document.getElementById("father").removeChild(childnode)
3. insertBefore(newElement,targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当做是最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置.
举例:
HTML文件:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";
</script>
DOM Element的属性
1. childNode返回所有子节点对象
<table id="mylist">
<tr><td>一个和尚有水喝。</td></tr>
<tr><td>两个和尚挑水喝。</td></tr>
<tr><td>三个和尚没水喝。</td></tr>
</table>
