1、DOM 簡介
當頁面加載時，浏覽器會創建頁面的文檔對象模型（Document Object Model）。文檔對象模型定義訪問和處理 HTML 文檔的標准方法。DOM 將 HTML 文檔呈現為帶有元素、屬性和文本的樹結構，即節點樹。通過 DOM，JS 可創建動態的 HTML，可以使網頁顯示動態效果並實現與用戶的交互功能。JS 能夠改變頁面中所有的 HTML 元素、屬性和 CSS 樣式，並對頁面中所有事件做出響應。所以學習 JS 的起點就是處理網頁，處理網頁就需要使用 DOM 進行操作。
2、DOM 獲取元素
JS 要想操作 HTML 元素，那麼首先就必須先找到該元素。通常使用以下幾種方法完成：
通過元素設置的 id 找到 HTML 元素。
通過標簽名找到 HTML 元素。
通過元素設置的名稱 (name) 找到 HTML 元素。
所謂的 DOM，實際上就是 document，獲取元素就是操作 document。
(1)、通過 id 找到元素
方法：document.getElementById('id');
網頁是由標簽將信息組合起來的，id 屬性值是唯一的，就像身份證一樣，通過一個身份證可以找到相對應的人，所以通過該方法，可以獲取到與之相對應的標簽，而獲取的元素在 JS 中是一個對象，若想對元素進行操作，則需要通過他的屬性或方法。
(2)、通過標簽名找到元素
方法：document.getElementsByTagName('Tagname');
通過該方法，返回的是帶有指定標簽名的對象的集合，也就是以數組的形式返回，返回的順序是他們在文檔中的順序。
(3)、通過 name 找到元素
方法：document.getElementsByName('name');
該方法與 getElementById() 方法有點相似，都是通過設置的屬性值找到元素，只不過該方法是通過設置的 name 屬性值查找元素。name 屬性在文檔中可能不唯一，所以該方法返回的也是元素的數組，而不是一個元素。
<body>
<input name="txt" type="text" value="1">
<input name="txt" type="text" value="2"><br>
<input name="txt" type="text" value="3">
<input name="txt" type="text" value="4"><br>
<input name="txt" type="text" value="5">
<input name="aaa" type="text" value="6">
<script>
//獲取所有name值為txt的元素
var oTxt = document.getElementsByName("txt");
//獲取元素的個數
alert(oTxt.length); //返回：5
//獲取第二個元素的值
alert(oTxt[1].value); //返回：2
</script>
</body>
既然可以通過 id 找到元素，那麼也就可以通過 class 找到元素。className 屬性用於設置或者返回元素的 class 類名。
語法：object.className = 'className'
該方法可以控制 class 類名，返回元素的 class 屬性，作用是可以為網頁中某個元素指定一個 className 來更改該元素的外觀。
實例：簡單的網頁換膚效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁換膚</title>
<style>
body{
background:lightgreen;
}
.col1{
background:lightgray;
}
.col2{
background:lightblue;
}
.col3{
background:violet;
}
.col4{
background:pink;
}
.col5{
background:#f93;
}
</style>
</head>
<body id="boy">
點擊切換：<input type="button" value="灰色" onclick="gr()">
<input type="button" value="藍色" onclick="bl()">
<input type="button" value="紫色" onclick="vi()">
<input type="button" value="粉色" onclick="pi()">
<input type="button" value="橘色" onclick="or()">
<script>
var x = document.getElementById('boy');
function gr(){
x.className = 'col1';
}
function bl(){
x.className = 'col2';
}
function vi(){
x.className = 'col3';
}
function pi(){
x.className = 'col4';
}
function or(){
x.className = 'col5';
}
</script>
</body>
</html>
這只是一個簡單的切換背景色效果，如果想切換網頁的整體樣式，可以使用外部 CSS 文件，通過 JS 改變 link 標簽的 href 屬性來完成。
如果想設置多個 class 類名相同的元素的樣式，就需要借助數組的方法來完成，其實現原理也很簡單，首先通過 id 獲取其父元素，再獲取父元素下所有子元素的標簽名，獲取標簽名返回的是元素的數組，所以就可以和訪問數組一樣的方法來訪問元素的數組，那麼先使用循環遍歷該元素數組，再做判斷，如果這個元素的 className 等於我們設置的 class 屬性值，就說明這是我們要找的元素。
實例：將有序列表中所有 class 屬性值為"col"的元素背景顏色設置為綠色
<body>
<ol id="o1">
<li>熱點</li>
<li class="col">美食</li>
<li>數碼</li>
<li class="col">科技</li>
<li>社會</li>
<li class="col">養生</li>
</ol>
<script>
//通過id獲取父元素
var aOl = document.getElementById('o1');
//通過標簽名獲取父元素下所有子元素
var oLi = aOl.getElementsByTagName('li');
//循環遍歷返回的子元素數組
for(var i=0; i<oLi.length; i++){
//如果當前子元素的className等於設置的class屬性值，則將其背景設置為綠色
if(oLi[i].className == 'col') oLi[i].style.background = 'green';
}
</script>
</body>
下面是一個通過 class 屬性值獲取元素的封裝函數，方便以後使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封裝getByClass函數</title>
<script>
//第一個參數為獲取的父元素，第二個參數為class屬性值。
function getByClass(oParent,aClass){
//空數組可以把找到的所有className都存放在裡邊，最後返回。
var aResult = [];
//通過標簽名獲取父元素下所有子元素。標簽名不固定，所以設置為*，便於傳入。
var aEle = oParent.getElementsByTagName('*');
//循環遍歷返回的子元素數組
for(var i=0; i<aEle.length; i++){
//如果當前子元素的className等於傳入的class屬性值，則將其添加到數值中。
if(aEle[i].className == aClass) aResult.push(aEle[i]);
}
//最後將這個數組返回
return aResult;
}
</script>
</head>
<body>
<ol id="o1">
<li>熱點</li>
<li class="col">美食</li>
<li>數碼</li>
<li class="col">科技</li>
<li>社會</li>
<li class="col">養生</li>
</ol>
<script>
//封裝函數的使用：
//先通過id獲取父元素
var aOl = document.getElementById('o1');
//再調用封裝好的函數傳入參數，獲取的父元素，子元素的class屬性值
var oCol = getByClass(aOl,'col');
//最後循環遍歷，設置樣式
for(var i=0; i<oCol.length; i++){
oCol[i].style.background = 'green';
}
</script>
</body>
</html>
3、DOM操作
獲取到 HTML 元素之後，就可以進行相應的操作。
(1)、改變HTML
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。innerHTML 顧名思義，inner 就是內部的，既然是 HTML，那麼就可以給裡邊放 HTML。該屬性可用於獲取和替換 HTML 元素的內容。
語法：document.getElementById(id).innerHTML = new HTML
<body>
<h1 id="tit">原標題</h1>
<script>
//改變原有標題
var aH = document.getElementById('tit');
aH.innerHTML = '新標題';
</script>
<div id="div1" style="width:500px;height:200px;border:1px solid black;"></div>
<script>
//創建HTML內容
var oDiv = document.getElementById('div1');
oDiv.innerHTML = '<h2>我是h2標題</h2><p>我是一個段落</p>';
</script>
</body>
(2)、操作元素屬性
修改元素屬性最簡單的方法就是直接修改，語法：document.getElementById(id).屬性名 = new value 比如修改圖片src屬性的指向路徑。
此外還可以通過DOM方法獲取、添加、刪除元素的屬性。
①、getAttribute()
getAttribute() 方法通過元素節點的屬性名獲取屬性的值。
語法：elementNode.getAttribute(name) name是想要獲取的元素節點的屬性名
②、setAttribute()
setAttribute() 方法添加一個新屬性並指定值，或者把一個現有的屬性設定為指定的值。
語法：elementNode.setAttribute(name,value) name是屬性名，value是屬性值。
③、removeAttribute()
removeAttribute() 方法可刪除元素的屬性。
語法：elementNode.removeAttribute(name) name是屬性名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
</head>
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" value="按鈕">
<script>
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
//獲取按鈕value屬性的值
var a = oBtn.getAttribute('value');
alert(a); //返回：按鈕
oBtn.onclick = function (){
//操作元素屬性有三種方法：
//第一種方法
//oTxt.value='請輸入文字';
//第二種方法
//oTxt['value']='請輸入文字';
//第三種方法
//修改文本框value屬性的值
oTxt.setAttribute('value','請輸入文字');
//刪除按鈕type屬性
oBtn.removeAttribute('type');
//刪除後默認為文本框
};
</script>
</body>
</html>
(3)、改變CSS
改變 HTML 元素的 CSS 樣式可直接使用該語法：document.getElementById(id).style.樣式名 = new style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<style>
#div1{
height:400px;
width:600px;
border:1px solid black;
padding:5px;
}
p{
line-height:18px;
text-indent:2em;
}
</style>
</head>
<body>
<h2>HTML DOM</h2>
<div id="div1">
<h3>JS可以使網頁添加動態效果並實現與用戶交互的功能。</h3>
<p>1. JS能夠改變頁面中所有的 HTML 元素。</p>
<p>2. JS能夠改變頁面中所有的 HTML 屬性。</p>
<p>3. JS能夠改變頁面中所有的 HTML 元素的CSS樣式。</p>
</div>
<input type="button" value="改變顏色" onclick="color()">
<input type="button" value="改變寬高" onclick="hig()">
<input type="button" value="隱藏內容" onclick="none()">
<input type="button" value="顯示內容" onclick="block()">
<input type="button" value="取消設置" onclick="cancel()">
<script>
var oDiv = document.getElementById('div1');
function color(){
oDiv.style.color = 'white';
oDiv.style.fontFamily = 'Microsoft YaHei';
oDiv.style.backgroundColor = 'green';
}
function hig(){
oDiv.style.width = '400px';
oDiv.style.height = '300px';
oDiv.style.border = '5px solid #ccc';
}
function none(){
oDiv.style.display = 'none';
}
function block(){
oDiv.style.display = 'block';
}
//取消設置
function cancel(){
var clean = confirm('確定取消所有設置？');
if(clean == true){
oDiv.removeAttribute('style');
}
}
</script>
</body>
</html>
上面的代碼，通過 style 設置的樣式，都是行間樣式，可以使用火狐的 Firebug 點擊相應的按鈕，就能看到所有設置的 CSS 樣式都出現在了行間。
可以直接通過 style 獲取和設置 CSS 樣式，那麼有沒有更簡潔的方法呢？可以借助於函數使用 JS 的內置對象 arguments 完成，所謂 arguments，就是可變參，不定參，參數的個數可變，是一個參數數組，無需指出參數名，就可訪問他們，但是為了增強可讀性，給參數取名，還是很有必要的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background:red"></div>
<script>
//獲取行間樣式
function css(){
//如果傳入參數的個數等於2
if(arguments.length == 2){
//則返回第二個參數樣式名的值
return arguments[0].style[arguments[1]];
}
else{
//否則就是設置CSS樣式
//第二個參數樣式名的值就等於傳入的第三個參數
arguments[0].style[arguments[1]] = arguments[2];
}
}
var oDiv = document.getElementById('div1');
alert(css(oDiv,'width')); //獲取對象的寬 返回：200px
css(oDiv,'background','green'); //將對象的背景顏色改為綠色
</script>
</body>
</html>
下面是一個獲取和設置行間樣式的封裝函數，以便以後使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取行間樣式</title>
<script>
function css(obj, name, value){
if(arguments.length == 2){
return obj.style[name];
}
else{
obj.style[name] = value;
}
}
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background:red"></div>
<script>
var oDiv = document.getElementById('div1');
alert(css(oDiv,'width')); //獲取div的寬
css(oDiv,'background','green'); //設置div的背景顏色
</script>
</body>
</html>
我們都知道，在實際的 Web 項目開發中，要遵循結果、表現、行為相分離的原則，以增強可讀性，優化代碼，便於後期維護。所以通常我們設置元素的樣式，並非都是在行間設置。使用 style 方法獲取的只是 DOM 元素 style 屬性裡的樣式規則，對於通過 class 屬性設置的外部樣式表，style 就顯得力不從心了。那要如何獲取元素的非行間樣式呢？DOM 標准中有個全局方法 getComputedStyle，通過該方法可以獲取當前對象的樣式信息。比如：getComputedStyle(obj, false).paddingLeft，可以獲取到對象的左內邊距。這裡需要注意：在獲取元素的復合樣式時，一定要使用精確的值，復合樣式比如 background、border，如果要獲取元素的背景顏色，只使用 background 會出錯，一定要寫成 backgroundColor。
JS 只能修改元素的行間樣式，並不能修改獲取到的非行間樣式。那麼很多人可能會產生疑問，既然可以獲取到又不能修改，那還獲取有什麼用。其實獲取非行間樣式是非常有必要的，如果是外部樣式表，樣式都是密密麻麻一片英文的存在，不可能一個個去找，到底該元素設置的什麼樣子，再回頭修改，那豈不是太浪費精力了，所以該方法就顯得尤為重要，而且返回的值都是精確值，通過獲取的非行間樣式信息，也有利於更精細的修改元素的當前樣式，這是多麼美妙的一件事，直接使用 style 設置元素的行間樣式，因為行間樣式的優先級最高，所以就覆蓋掉了非行間樣式，其實也就相當於跟修改了非行間樣式一樣，只是顯示在了行間，我們目的反著是已經達到了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取非行間樣式</title>
<style>
#div1{
width:200px;
height:200px;
background:red;
margin-top:10px;
}
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div1');
alert(getComputedStyle(oDiv,false).width);
oDiv.style.width = '400px';
alert(getComputedStyle(oDiv,false).height);
oDiv.style.height = '400px';
//注意這裡修改復合樣式時，使用的background，可在FF下用Firebug查看具體的行間樣式。
alert(getComputedStyle(oDiv,false).backgroundColor);
oDiv.style.background = 'green';
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
(4)、對事件做出響應
實例：全選和反選，輸入對應的序號選中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
</head>
<body>
<form id="list">
請選擇你的業余愛好:<br>
1. 音樂<input type="checkbox" name="love" id="like1">
2. 閱讀<input type="checkbox" name="love" id="like2">
3. 游泳<input type="checkbox" name="love" id="like3">
4. 籃球<input type="checkbox" name="love" id="like4">
5. 足球<input type="checkbox" name="love" id="like5">
6. 散步<input type="checkbox" name="love" id="like6">
7. 泡吧<input type="checkbox" name="love" id="like7">
8. 逛街<input type="checkbox" name="love" id="like8"><br>
<input type="button" value = "全選" onclick="optAll()">
<input type="button" value = "反選" onclick="noAll()">
<p>輸入1-8序號選擇，每次只可以選擇一項：</p>
<input id="txt1" type="text">
<input id="btn1" type="button" value="確定">
</form>
<script>
function optAll(){
//通過獲取標簽名設置全選
var oList = document.getElementById('list');
var aCheck = oList.getElementsByTagName('input');
for(var i=0; i<aCheck.length; i++){
if(aCheck[i].type == 'checkbox'){
aCheck[i].checked = true;
}
}
}
function noAll(){
//通過獲取設置的name屬性值設置反選
var aLove = document.getElementsByName('love');
for(var i=0; i<aLove.length; i++){
if(aLove[i].type == 'checkbox'){
aLove[i].checked = false;
}
}
}
var oBtn = document.getElementById('btn1');
//給獲取的按鈕添加點擊事件
oBtn.onclick = function (){
//獲取文本框輸入的值
var oTxt = document.getElementById("txt1").value;
//定義的復選框id值為like1-8。括號中進行的是字符串連接，id+輸入到文本框的值=該元素的id值
var oLike = document.getElementById('like' + oTxt);
oLike.checked = true;
}
</script>
</body>
</html>
3、DOM節點
HTML 文檔可以說是由節點構成的集合，常見的 DOM 節點有三種，即元素節點、屬性節點和文本節點。元素節點就是 HTML 標簽，標簽的屬性就是屬性節點，文本節點就是頁面可以浏覽的內容。
在文檔對象模型中，每一個節點都是一個對象，DOM 節點有三個重要的屬性：節點的名稱，節點的值和節點的類型。
(1)、nodeName：節點的名稱
nodeName 屬性返回節點的名稱。元素節點的名稱與標簽名相同(大寫)，屬性節點的名稱是屬性的名稱，文本節點的名稱永遠都是 #text，文檔節點的名稱永遠都是 #document。
(2)、nodeValue：節點的值
nodeValue 屬性返回節點的值。元素節點的值是 undegined 或 null，屬性節點的值是屬性的值，文本節點的值是文本自身。
(3)、nodeType：節點的類型
nodeType 屬性返回節點的類型。以下是常見的節點類型：
節點類型 說明 值 元素節點 每一個HTML標簽都是一個元素節點，如 <div> 、 <p>、<ul>等 1 屬性節點 元素節點（HTML標簽）的屬性，如 id 、class 、name 等。 2 文本節點 元素節點或屬性節點中的文本內容。 3 注釋節點 表示文檔注釋，形式為<!-- text content -->。 8 文檔節點 表示整個文檔（DOM 樹的根節點，即 document ）。 9
<body>
<ul>
<li>JS</li>
<li>DOM</li>
</ul>
<script>
var nodes = document.getElementsByTagName('li');
for(var i=0; i<nodes.length; i++){
document.write('第' + (i+1) + '個節點的名稱是' + nodes[i].nodeName + '<br>');
document.write('第' + (i+1) + '個節點的值是' + nodes[i].nodeValue + '<br>');
document.write('第' + (i+1) + '個節點的類型是' + nodes[i].nodeType + '<br>');
document.write('<br>');
}
/*
返回：
第1個節點的名稱是LI
第1個節點的值是null
第1個節點的類型是1
第2個節點的名稱是LI
第2個節點的值是null
第2個節點的類型是1
*/
</script>
</body>
JS 中函數可以嵌套使用，有父函數有子函數，HTML 標簽也可以嵌套使用，那麼就說明存在著各種不同的節點關系，比如父節點、子節點和兄弟節點。為了方便操作，DOM定義了一些節點的公共屬性。
(1)、子節點
childNodes 屬性返回節點的子節點集合，可使用length屬性返回子節點的數量，然後就可以和數組一樣獲取需要的信息。
<body>
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var oUl = document.getElementById('u1');
alert(oUl.childNodes.length); //返回：11
</script>
</body>
通過上面的代碼，可以看到返回的是 11。ul 下明明只有 5 個 li 元素，怎麼會返回 11 呢？其實是這麼回事：
<ul id="u1"> 第1個節點（文本節點）
<li>第2個節點（元素節點）</li> 第3個節點（文本節點）
<li>第4個節點（元素節點）</li> 第5個節點（文本節點）
<li>第6個節點（元素節點）</li> 第7個節點（文本節點）
<li>第8個節點（元素節點）</li> 第9個節點（文本節點）
<li>第10個節點（元素節點）</li> 第11個節點（文本節點）
</ul>
因為通過 childNodes 屬性返回的子節點集合，不僅包括元素節點，而且還包括文本節點，浏覽器會將標簽之間的空白默認為文本節點，如果在空白處輸入文字，就會顯示在頁面上，這就造成了不必要的麻煩，所以建議使用 children 屬性，該屬性只返回元素節點，不包括文本節點，並且不包括注釋節點。
<body>
<ul id="u1">
<li>
我是個文本節點
<span>我是span元素。</span>
</li>
<li></li> <!-- 注釋 -->
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oUl = document.getElementById('u1');
alert(oUl.children.length); //返回：5
</script>
</body>
上面的代碼，ul 下有 5 個 li 元素，返回子節點個數為 5。children 屬性要比 childNodes 屬性好用太多了，只返回元素的子節點，還不包括孫子輩節點。
(2)、首尾子節點
firstElementChild 屬性返回 children 數組的第一個節點。
語法：node.firstElementChild 該方法相當於：element.children[0]
lastElementChild 屬性返回 children 數組的最後一個節點。
語法：node.lastElementChild 該方法相當於：element.children[element.children.length-1]
<body>
<div style="border:2px solid green" id="div1">
空白節點
<p>JS</p>
<div>DOM</div>
<h3>jQuery</h3>
</div>
<script>
var x = document.getElementById('div1');
document.write('第一個節點的名稱：' + x.firstElementChild.nodeName + '<br>');
//返回：第一個子節點的名稱：P
document.write('最後一個節點的名稱：' + x.lastElementChild.nodeName)
//返回：最後一個子節點的名稱：H3
</script>
</body>
(3)、父節點
parentNode 屬性用於獲取指定節點的父節點。注意：父節點只能有一個。通過使用兩個獲取父節點，可獲取祖節點。
實例：點擊子節點，隱藏父節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
</head>
<body>
<ul id="u1">
<li>aaa <a href="javascript:;">點擊隱藏</a></li>
<li>bbb <a href="javascript:;">點擊隱藏</a></li>
<li>ccc <a href="javascript:;">點擊隱藏</a></li>
<li>ddd <a href="javascript:;">點擊隱藏</a></li>
<li>eee <a href="javascript:;">點擊隱藏</a></li>
</ul>
<script>
var oUl = document.getElementById('u1');
//查看ul元素的父節點
alert(oUl.parentNode); //返回：[object HTMLBodyElement]
//通過標簽名獲取所有的a元素
var aA = document.getElementsByTagName('a');
for(var i=0; i<aA.length; i++){
aA[i].onclick = function (){
//設置當前節點的父節點為隱藏
this.parentNode.style.display = 'none';
};
}
</script>
</body>
</html>
offsetParent 屬性可返回一個元素用於定位的父級。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<style>
#div1{
width:200px;
height:200px;
background:green;
margin:100px;
/*position:relative;*/
}
#div2{
width:100px;
height:100px;
background:red;
position:absolute;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script>
var oDiv2 = document.getElementById('div2');
alert(oDiv2.offsetParent);
//返回：[object HTMLBodyElement]
//div2的父級是div1,如果取消div1相對定位的注釋。則返回：[object HTMLDivElement]
</script>
</body>
</html>
(3)、兄弟節點
nextElementSibling 屬性返回同一樹層級中某個節點之後緊跟的節點。
語法：element.nextElementSibling
previousElementSibling 屬性返回同一樹層級中某個節點之前緊跟的節點。
語法：element.previousElementSibling
實例：獲取 li 元素節點的兄弟節點
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
//獲取第二個子節點之後緊跟的節點
var x = aLi[1].nextElementSibling;
alert(x.innerHTML); //返回：JS
//獲取第二個子節點之前緊跟的節點
var y = aLi[1].previousElementSibling;
alert(y.innerHTML); //返回：HTML
</script>
</body>
4、DOM 應用
DOM 最實際的應用就是可以通過 JS 創建、插入和刪除節點。
(1)、創建節點
createElement() 方法可創建元素節點。
語法：document.createElement(tagName)
appendChild()方法可在指定節點的末尾插入一個新的子節點，每次都向末尾添加。
語法：父級.appendChild(new node)
實例：創建並添加 li 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('u1');
var oTxt = document.getElementById('txt1');
//文本框輸入提示
oTxt.placeholder = '請輸入文字創建li元素';
oBtn.onclick = function (){
//創建li元素
var oLi = document.createElement('li');
//創建的li元素的HTML=文本框輸入的值
oLi.innerHTML = oTxt.value;
//插入到oUl父級下，作為子節點，在每個創建的li末尾插入新創建的li元素
oUl.appendChild(oLi);
//父級.appendCild(子節點);
};
};
</script>
</head>
<body>
<input id="txt1" type="text"value="">
<input id="btn1" type="button"value="創建li">
<ul id="u1"></ul>
</body>
</html>
(2)、插入節點
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法：父級.insertBefore(new node, node) 第一個參數為要插入的新子節點。第二個參數是原有節點，也就是在誰之前插入。
實例：創建並添加 li 元素，每個新創建的 li 元素都插入到之前插入的 li 元素之前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('u1');
var oTxt = document.getElementById('txt1');
oBtn.onclick = function (){
//創建li元素
var oLi = document.createElement('li');
//獲取所有li元素
var aLi = oUl.getElementsByTagName('li');
oLi.innerHTML = oTxt.value;
//這裡需要注意：頁面中本沒有li元素，li元素是通過JS創建的
//所以第一個li元素應該添加到父級下最後一個子節點
//然後基於這個節點，將之後再插入的子節點插入到上一個節點之前
//如果li元素本來不存在，則執行else，在父級插入一個子節點。
//如果li元素的個數>0，說明已經創建了，則插入到這個子節點之前。
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}
else{
oUl.appendChild(oLi);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" value="">
<input id="btn1" type="button" value="創建li">
<ul id="u1"></ul>
</body>
</html>
(4)、刪除節點
removeChild() 方法用於刪除一個節點
語法：父級.removeChild(node) 參數為要刪除的子節點。
實例：簡單的表格添加和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<script>
window.onload = function (){
var oTab = document.getElementById('tab1');
var oName = document.getElementById('user');
var oAge = document.getElementById('age');
var oBtn = document.getElementById('btn1');
//設置添加的ID項的值
var id = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function (){
//創建一個tr
var oTr = document.createElement('tr');
//創建第一個td（ID項）
var oTd = document.createElement('td');
//獲取ID，已經刪除的ID號，不能再重用。
oTd.innerHTML = id++;
//將創建的td放入創建的tr中
oTr.appendChild(oTd);
//創建第二個td（姓名項）
var oTd = document.createElement('td');
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
//創建第三個td（年齡項）
var oTd = document.createElement('td');
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
//創建第四個td（操作項）
var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">刪除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function (){
//刪除整行
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
//將創建好的tr放入tbody中
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
姓名：<input id="user"type="text">
年齡：<input id="age"type="text">
<input id="btn1" type="button" value="添加">
<table id="tab1" border="1" width="500px">
<caption>員工表</caption>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小白</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>小明</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>小紅</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>張三</td>
<td>29</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>35</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
這個實例只能很簡單的完成添加和刪除，並不對輸入進行判斷，如果想要做的完美，還需要做很多工作，可以對表格進行美化，設置背景色，鼠標移入高亮顯示，鼠標移出恢復背景色，最關鍵的就是要對表單輸入內容進行判斷，以確保每次提交的信息都是有效信息，如果表格信息量大，還可以添加支持模糊搜素，多關鍵字搜索，以提高用戶體驗度，當然在實際的項目中，這樣的情況幾乎不會出現，但可以作為自己的實踐，檢驗學習成果。
(5)、替換節點和創建文本節點
replaceChild() 方法可用於替換元素節點。
語法：node.replaceChild (new node, node) 第一個參數為用於替換的節點。第二個參數為原有節點。
createTextNode() 方法可創建新的文本節點，返回新創建的 Text 節點。
語法：document.createTextNode(txt)
這兩種方法平時幾乎用不到，但還是需要了解。
實例：點擊按鈕將 span 標簽替換為 b 標簽。再創建一個文本節點插入到創建的 p 元素下，並設置 className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript實例</title>
<style>
.p1{
width:300px;
height:100px;
background-color:#ccc;
}
</style>
</head>
<body>
<p>創建一個P標簽，設置<span id="s">className</span>屬性，創建文本節點。</p>
<input type="button" value="點擊替換" onclick="change()">
<script>
function change(){
//獲取span元素
var oS = document.getElementById('s');
//創建一個b元素
var newNode = document.createElement('b');
//要替換的文本節點
var txt = document.createTextNode('className');
//將文本節點插入到創建的b元素下
newNode.appendChild(txt);
//在span元素的父級下將span元素替換成新創建的b元素
oS.parentNode.replaceChild(newNode,oS);
}
//創建一個p元素
var oP = document.createElement('p');
//設置className
oP.className = 'p1';
//創建文本節點
var txtNode = document.createTextNode('createTextNode用於創建文本節點!');
//將創建的文本節點插入到p元素下
oP.appendChild(txtNode);
//再將p元素插入到父級body下
document.body.appendChild(oP);
</script>
</body>
</html>