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>