JS Docment常用属性和方法

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树

DOM常用方法：

1、通过 id 查找 HTML 元素  getElementById()

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

实例

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

2、 通过标签名查找 HTML 元素  getElementsByTagName()

实例

本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

注意：getElementsByTagName()返回的是数组。

3、 通过 name 查找 HTML 元素  getElementsByName()

实例

本例查找 name="main" 的元素：

var x=document.getElementsByName("main");

注意：getElementsByName()返回的是数组。

4、 创建新的 HTML 元素 createElement()、createTextNode()、appendChild()

如需向 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>

5、 删除已有的 HTML 元素  removeChild()

如需删除 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>

6、复制并返回当前节点的复制节点  cloneNode(true)

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在 document 树中。复制原来节点的属性值，包括 ID 属性，所以在把这个新节点加到 document 之前，一定要修改 ID 属性，以便使它保持唯一。当然如果 ID 的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制 当前节点的所有子节点，包括该节点内的文本。

实例

<p id="mypara">11111</p>
<script>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>

7、 把当前节点的一个子节点换成另一个节点  replaceChild()

实例

<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>

8、 给当前节点插入一个新节点 insertBefore()

给当前节点插入一个新节点，如果 targetElement 被设置为 null ，那新节点被当作最后一个子节点插入，否则那新节点应该被插入 targetElement 之前的最近位置。

实例

<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>

9、创建属性节点 createAttribute()

实例

<input type="text" id="ip" />

<script>
var element=document.getElementById("ip");
element.createAttribute("readOnly");
</script>

10、把指定属性设置或修改为指定的值。 setAttribute()

实例

<input type="text" id="ip" />

<script>
var element=document.getElementById("ip");
element.setAttribute("type","button");
</script>

11、 返回指定的属性值  getAttribute() 实例

实例

<input type="text" id="ip" />

<script>
var element=document.getElementById("ip");
element.getAttribute("type");
</script>

12、click() 点击事件

执行元素的一次点击，可以用于通过脚本来触发 onClick 函数

实例

<div id="test" οnclick='wow()'>hhh</div>
<script type="text/javascript">
 var div = document.getElementById("test");
div.click();
function wow() {
 alert("test");
}
</script>

DOM常用属性：

1、 childeNodes  

返回所有子节点对象

实例

<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>

2、 innerHTML

这是一个事实上的标准，不属于 w3c DOM ，但是几乎所有支持 DOM 的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的 HTML。

实例

<p><b>aaaaa</b></p>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>bbbbb</b>"
}
</script>

2、style

返回一个元素的 style 对象的引用，通过它我们可以获得并修改每个单独的样式。

实例

<p id='test'>Hello World</p>
<script type="text/javascript">
document.getElementById("test").style.backgroundColor="yellow"
}
</script>

3、 更多属性：

Attributes                         存储节点的属性列表(只读)

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表示(只读)