1.getElementById()
返回帶有指定ID的元素//得到元素對象後就可以獲取和更改對象的屬性
根據指定的 id 屬性值得到對象。返回 id 屬性值對應的第一個對象的引用。假如對應的爲一組對象，則返回該組對象中的第一個。 如果無符合條件的對象，則返回 null
var test=document.getElementById(‘test’)
2.getElementsByTagName()
返回包含帶有指定標籤名稱的所有元素的節點容器。返回元素的順序是它們在文檔中的順序,把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法，它將返回文檔中所有元素的列表
getElementsByName()返回指定name的集合//好像哪個瀏覽器有個bug,如果name和id同名了,byId方法取到的是name的對象
<p>666</p>
<input type=’text’ name=’test’ value=’666’>
<script>
var test1=document.getElementsByTagName(‘p’)[0]
var test2=document.getElementsByTagName(‘input’)[0].value
</script>
3.getElementsByClassName()
返回包含帶有指定類名的所有元素的節點列表容器,順序是它們在文檔中的順序
var test=document.getElementsByClassName(‘test’)[1]
4.createElement()
創建元素節點,配合下面兩個方法纔有效果,但是沒有效果內存中也是創建了的.參數填要創建的元素名
5.appendChild()
把新的子節點添加到指定節點。調用者是父親(添加到末尾)
var p=document.createElement('p')
p.innerHTML='6666'//添加標籤內容
document.getElementById('test').appendChild(p)//p是test的最後一個兒子了
6.insertBefore()
在指定的子節點前面插入新的子節點。調用者是父親(添加到前面)
var p=document.createElement('p')
p.innerHTML='666'
var div = document.getElementById("mydiv")
div.insertBefore(p,div.childNodes[0]);//p是div的第一個兒子的哥哥了
7.createAttribute()
創建屬性,參數是屬性名
8.setAttributeNode()
設置屬性節點,注意參數傳的是attribut不是node,看下面例子
9.getAttributeNode()
獲取屬性節點,參數是屬性名
<body>
<p id="p1">變紅</p>
<p>不變色</p>
<p id="p2">也變紅</p>
<script>
var p=document.getElementById('p1')//獲取元素節點
varatt=document.createAttribute("style");//創建屬性
att.value="color:red;";//設置屬性值
p.setAttributeNode(att);//設置屬性節點
var p2=document.getElementById('p2');//獲取元素節點
var att2=document.createAttribute("style");//創建屬性
att2.value=p.getAttributeNode('style').nodeValue;//獲取屬性節點,得到屬性
p2.setAttributeNode(att2);//設置屬性節點
</script>
</body>
10.getAttribute()
返回指定的屬性值。
11.setAttribute()
把指定屬性設置或修改爲指定的值(值存在就替換)。
<body>
<a href="http://www.baidu.com"id="baidu">百度</a>
<script>
var baidu=document.getElementById('baidu')//獲取元素節點
document.write(baidu.getAttribute('href'))//獲取href屬性的值
baidu.setAttribute('href','http://www.sina.cn')//設置href屬性的值
</script>
</body>
12. createTextNode()
創建文本節點.文本節點沒有子元素.
var text=document.createTextNode('hello')//創建文本節點
document.getElementById('p1').appendChild(text)//添加子節點
注意:下面div元素節點的子節點有3個,因爲回車算一個空白文本節點
<div>
<li>1</li>
</div>
13.comment 註釋節點,沒有子節點
①createComment()創建註釋節點
var com=document.createComment('hello world!');
document.body.appendChild(com)//因爲是註釋,所以瀏覽器翻譯文檔後不會顯示效果可以通過console.log()調試
②appendData()在註釋節點裏(末尾)添加文本
<body><!--666--></body>
<script>
document.body.childNodes[0].appendData('hello')
console.log(document.body.childNodes[0])
</script>
③deleteData(index,count)從index指定的位置開始刪除count個字符
<body><!--666--></body>
<script>
document.body.childNodes[0].deleteData(0,3)
console.log(document.body.childNodes[0])
</script>
④insertData(index,text)從index指定位置插入text文本
⑤replaceData(index,count,text)從index指定位置開始count長度的本文被替換爲text文本
⑥substringData(index,count)方法提取從index指定的位置開始count長的字符串
⑦IE8-瀏覽器將標籤名爲"!"的元素視作註釋節點，所以文檔聲明<!DOCTYPE html>也被視作註釋節點,如果<html>標籤外部上下都有註釋時，只有firefox可以識別出最下面的註釋，其他瀏覽器都識別不出(體現在document.childNodes.length結果不一樣)
14.replaceChild()
替換子節點,注意調用這個方法的對象一定是被替換者的父親
<body>
<p id="mytest">666</p>
<script>
var textnode=document.createElement('p');//創建元素節點
textnode.innerHTML='111'//給元素節點添加內容
var item=document.getElementById("mytest")//獲取節點
item.parentNode.replaceChild(textnode,item);//替換節點
</script>
</body>
15.removeChild()
刪除子節點,參數是節點,調用者是父親
document.body.removeChild(document.getElementById("test"))
16.cloneNode() 克隆節點,
調用者是自己,參數是true,false.不寫默認爲true,(true子節點也被克隆,包括所有的事件屬性各種,false子節點不被克隆)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div1">
</div>
<script>
var ul=document.getElementsByTagName('ul')[0]
var newchild=ul.cloneNode(true)
document.getElementById('div1').appendChild(newchild)
</script>
</body>