 |
VOOZH | about |
|
VOOZH | about |
自己總結整理的，有什麼錯誤的地方大家可以提出了，我進行修改。或者有什麼需要添加的也可以提出來
getElementById方法
這個方法返回一個與那個有著給定id屬性值的元素節點相對應的對象。
由於js區分大小寫，一定要注意該方法的大小寫格式和類似方法的大小寫格式。
用法： document.getElementById(「id的名稱」);
getElementByTagName方法
該方法返回值是一個對象數組，每個對象分別對應著文檔里有著給定標籤的元素。
getElementByTagName(tagname).length可以獲取數組中對象的個數。
getAttribute方法
獲取對象的屬性
Object.getAttribute(「屬性名稱」);
setAttribute方法
設置對象的屬性
setAttribute(「屬性名稱」,」屬性名」);
childNodes屬性
屬性將返回一個數組，這個數組包含給定元素節點的全部子元素（包括元素節點，文本節點，屬性節點）；
用法：var array= element.childNodes; 可以繼續調用length屬性，獲取子元素的個數。
document.body
就相當於網頁中的body元素，不用專門獲取。
nodeType屬性
childNodes屬性返回值是一個對象數組，包含所有的元素節點（包括元素節點，文本節點，屬性節點）。調用nodeType屬性返回值共有三種：1、2、3；如果節點類型是元素節點將返回1，如果節點類型是屬性節點將返回2，如果節點類型是文本節點將返回3.
用法：node.nodeTye;
nodeValue屬性
查詢或者設置節點的值
用法：
查詢：var des=document.getElementById(「des」);
alert(des.childNodes[0].nodeValue);
設置：var firstp=document.getElementById("myp");
// firstp.firstChild.nodeValue="我是改變後的值";
Firstp.childNodes[0].nodeValue=」我是改變後的值」;
firstChild和lastChild屬性
獲取該元素的第一個或者是最後一個子節點。
document.write方法
write方法可以快速的把字符串插入到文檔裏面
用法 document.write("<p>這是一個段落</p>");
缺點：必須在<body></body>部分使用<script>document.write("11")</script>標籤才能調用該方法。即使將該方法寫在外部js文件中，也必須在<body></body>部分使用<script></script>標籤。所以儘量不要用該方法，它使js代碼和html代碼混在了一塊，違背了分離javascript原則。
innerHTML屬性(幾乎所有的瀏覽器都支持該屬性)
用來讀寫某給定元素裏面的HTML內容
<p id=「para「> 這是一個段落</p>
用法: var p=document.getElementById(「para」);
獲取： alert(p.innerHTML);// 將顯示 這是一個段落（如果內部含有其他元素，會將其它的元素標籤也顯示出來，是HTML內容，而不是文本節點內容）
例如：<p id=「para「><strong> 這是一個段落</strong></p>
則 p.innerHTML的值為<strong> 這是一個段落</strong>
設置： p.innerHTML=」新段落」;
p.innerHTML=」<h3>新段落</h3>」
優點：該方法不用在<body></body>部分使用<script></script>標籤就可以使用。
createElement方法
用法：document.create(nodeName); eg：document.createElement(「p」);
該方法只能創建元素節點，但不能將元素節點添加到文檔中，因此我們需要另外一種方法將創建的節點添加到html文檔中去。
appendChild方法
把新創建的節點插入到文檔中最簡單的方法是，讓它成為某一個元素節點的子節點。
假設向<div id=」mydiv」></div>中添加<p>元素
用法：parent.appendChild(child);
var p=document.createElement(「<p>這是一個段落</p>」);
var div=document.getElementById(「mydiv」);
div.appendChild(p);
createTextNode方法
添加文本節點，上面新建<p>中為空，因此向<p>中添加一個文本節點。
用法： var text=document.createTextNode(「hello world!」);
p.appendChild(text);
insertBefore方法
將新元素添加到現有元素的前面
用法：parentElement.insertBefore(newElement,targetElement);
需要用到兩個元素的父節點，兩個元素有共同的父節點。
DOM並未提供insertAfter方法。但可以自己編寫，思想：比如將A插入到B的後面
需要用到nextSinling屬性（返回某個元素之後緊跟的元素（處於同一樹層級中））；
還要用到insertBefore;
var parent=targeElement.parentNode;
if(parent.lastChild==targetElement)
parent.appendChild(newElement);
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}