1.DOM對象簡介
DOM，全稱“Document Object Model（文檔對象模型）”乙埃，它是由W3C組織定義的一個標準站玄。
在前端開發(fā)時，我們往往需要在頁面某個地方添加一個元素或者刪除元素快骗，這種添加元素、刪除元素的操作就是通過DOM來實現(xiàn)的。
2.DOM結(jié)構
DOM采用樹形結(jié)構作為分層結(jié)構方篮，以樹節(jié)點形式表示頁面中各種元素或內(nèi)容思灌。
舉例：
<html>
<head>
<title><title>
<body>
<h1>我要自學網(wǎng)</h1>
<p>我要自學網(wǎng)成立于……</p>
</body>
</html.>
上面這個HTML文檔使用DOM樹形結(jié)構解析為：
在DOM中，每一個元素看成一個節(jié)點恭取，而每一個節(jié)點就是一個“對象”。也就是我們在操作元素時熄守，把每一個元素節(jié)點看成一個對象蜈垮，然后使用這個對象的屬性和方法進行相關操作。
下面我們介紹幾個關于節(jié)點的概念裕照。
1攒发、根節(jié)點
在HTML文檔中，html就是根節(jié)點晋南。
2惠猿、父節(jié)點
一個節(jié)點之上的節(jié)點就是該節(jié)點的父節(jié)點，例如h1的父節(jié)點就是body负间，body的父節(jié)點就是html偶妖。
3、子節(jié)點
一個節(jié)點之下的節(jié)點就是該節(jié)點的子節(jié)點政溃，例如h1就是body的子節(jié)點趾访。
4、兄弟節(jié)點
如果多個節(jié)點在同一層次董虱，并擁有相同的父節(jié)點扼鞋，那么這幾個節(jié)點就是兄弟節(jié)點。
例如h1和p就是兄弟節(jié)點愤诱，因為他們擁有相同的父節(jié)點body
DOM對象節(jié)點屬性;
parentNode 獲取當前節(jié)點的父節(jié)點
childNodes 獲取當前節(jié)點的子節(jié)點集合
firstChild 獲取當前節(jié)點的第一個子節(jié)點
lastChild 獲取當前節(jié)點的最后一個子節(jié)點
previousSibling 獲取當前節(jié)點的前一個兄弟節(jié)點
nextSibling 獲取當前節(jié)點的后一個兄弟節(jié)點
attributes 元素的屬性列表
其實除了上表列舉的屬性之外云头，還有nodeName、nodeValue和nodeType等幾個比較重要的屬性淫半。
DOM節(jié)點操作簡介:
在DOM學習中溃槐，對于節(jié)點的操作是核心內(nèi)容，也是整個JavaScript入門教程中最核心技術之一撮慨。大家一定要花心思去認真掌握竿痰。在一般的前端工作面試中，這些操作是最基本的
關于DOM節(jié)點常用操作如下：
（1）創(chuàng)建節(jié)點砌溺；
（2）插入節(jié)點影涉；
（3）刪除節(jié)點；
（4）復制節(jié)點规伐；
（5）替換節(jié)點蟹倾；
獲取DOM中指定元素:
在[CSS入門教程]的學習中，我們知道：如果想要對某個元素進行樣式操作，就必須先通過一種方式來選中該元素（也就是[CSS選擇器]鲜棠，然后才能進行相關樣式的操作肌厨。在JavaScript中，如果想要對節(jié)點進行創(chuàng)建豁陆、刪除等操作柑爸，同樣也要通過一種方式來選中該節(jié)點。只有你獲取了該元素節(jié)點盒音，才能進行各種操作表鳍，很容易理解吧。
在JavaScript中祥诽，可以通過以下2種方式來選中指定元素：
（1）getElementById()譬圣；
（2）getElementsByName()
一、getElementById()
在JavaScript中雄坪，如果想通過id來選中元素厘熟，我們可以使用document對象的getElementById()方法。
getElementById()方法類似于CSS中的id選擇器维哈。
語法：
document.getElementById("元素id");
舉例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="lvye">綠葉學習網(wǎng)JavaScript入門教程</div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.style.color = "red";
</script>
</body>
</html>
在瀏覽器預覽效果如下：
分析：
這里使用document.getElementById()的方法獲取id為lvye的div元素绳姨，然后把這個DOM對象賦值給變量e，然后使用DOM對象的style對象來設置div元素顏色為紅色笨农。我們在“JavaScript操作CSS樣式”這一節(jié)會詳細給大家介紹這種方法就缆。
二、getElementsByName()
在JavaScript中谒亦，如果想通過name來選中元素竭宰，我們可以使用document對象的getElementsByName()方法。
語法：
document.getElementsByName("表單元素name值");
說明：
getElementsByName()方法都是用于獲取表單元素份招。
與getElementById()方法不同的是切揭，使用該方法的返回值是一個數(shù)組，而不是一個元素锁摔。因此廓旬，我們想要獲取具體的某一個表單元素，就必須通過數(shù)組下標來獲取谐腰。
舉例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input name="web" id="radio1" type="radio" value="HTML"/>
<input name="web" id="radio2" type="radio" value="CSS"/>
<input name="web" id="radio3" type="radio" value="JavaScript"/>
<input name="web" id="radio4" type="radio" value="jQuery"/>
<script type="text/javascript">
alert(document.getElementsByName("web")[0].value);
</script>
</body>
</html>
在瀏覽器預覽效果如下：
其實可以這樣說孕豹， getElementById()和getElementsByName()這兩種方法是“JavaScript選擇器”。
創(chuàng)建節(jié)點:
在JavaScript中十气，創(chuàng)建新節(jié)點都是先用document對象中的createElement()和createTextNode()這2種方法創(chuàng)建一個元素節(jié)點励背，然后再通過appendChild()、insertBefore()等方法把新元素節(jié)點插入現(xiàn)有的元素節(jié)點中去砸西。
語法：
var e = document.createElement("元素名"); //創(chuàng)建元素節(jié)點
var t = document.createTextNode("元素內(nèi)容"); //創(chuàng)建文本節(jié)點
e.appendChild(t); //把元素內(nèi)容插入元素中去
舉例1：創(chuàng)建簡單節(jié)點
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("h1");
var txt = document.createTextNode("綠葉學習網(wǎng)");
e.appendChild(txt); //把元素內(nèi)容插入元素中去
document.body.appendChild(e);
</script>
</body>
</html>
在瀏覽器預覽效果如下：
舉例2：創(chuàng)建復雜節(jié)點
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
</body>
</html>
在瀏覽器預覽效果如下：
插入節(jié)點:
在JavaScript中叶眉，插入節(jié)點有2種方法：
（1）appendChild();
（2）insertBefore();
1址儒、appendChild()
在JavaScript中，我們可以使用appenChild()方法把新的節(jié)點插入到當前節(jié)點的“內(nèi)部”衅疙。
語法：
obj.appendChild(new)
說明：
obj表示當前節(jié)點莲趣，new表示新節(jié)點。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //獲取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列項文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新項" onclick="insert()" />
</body>
</html>
在瀏覽器預覽效果如下：
分析：
我們在文本框中輸入列表項文本“jQuery”饱溢，然后點擊“插入新項”按鈕喧伞，瀏覽器預覽效果如下：
2.nsertBefore()
在JavaScript中，我們可以使用insertBefore()方法將新的子節(jié)點添加到當前節(jié)點的“末尾”绩郎。
語法：
obj.insertBefore(new,ref)
說明：
obj表示父節(jié)點絮识；
new表示新的子節(jié)點；
ref指定一個節(jié)點嗽上，在這個節(jié)點前插入新的節(jié)點。
舉例：
<!DOCTYPE html>
<html >
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //獲取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.insertBefore(e,list.firstChild);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
列項文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新項" onclick="insert()"/>
</body>
</html>
在瀏覽器預覽效果如下：
分析：
我們在文本框中輸入列表項文本“jQuery”熄攘，然后點擊“插入新項”按鈕兽愤，瀏覽器預覽效果如下：
刪除節(jié)點
語法：
obj.removeChild(oldChild);
舉例1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
//定義刪除函數(shù)
function del() {
var e = document.getElementById("list");
//判斷元素節(jié)點e是否有子節(jié)點
if (e.hasChildNodes) {
e.removeChild(e.lastChild); //刪除e元素的最后一個子節(jié)點
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="刪除" onclick="del()"/></div>
</body>
</html>
在瀏覽器預覽效果如下：
復制節(jié)點
語法：
obj.cloneNode(bool)
說明：
參數(shù)obj表示被復制的節(jié)點，而參數(shù)bool是一個布爾值挪圾，取值如下：
（1）1或true：表示復制節(jié)點本身以及復制該節(jié)點下的所有子節(jié)點浅萧；
（2）0或false：表示僅僅復制節(jié)點本身，不復制該節(jié)點下的子節(jié)點哲思；
舉例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function add() {
var e = document.getElementById("list");
document.body.appendChild(e.cloneNode(1));
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="添加" onclick="add()" />
</body>
</html>
在瀏覽器預覽效果如下：
替換節(jié)點
語法：
obj.replaceChild(new,old)
說明：
obj洼畅，表示被替換節(jié)點的父節(jié)點；
new棚赔，表示替換后的新節(jié)點帝簇；
old，需要被替換的舊節(jié)點靠益。
舉例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function replace() {
//獲取兩個文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//獲取p元素
var lvye = document.getElementById("lvye");
//根據(jù)兩個文本框的值創(chuàng)建新節(jié)點
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e,lvye);
}
</script>
</head>
<body>
<p id="lvye">綠葉學習網(wǎng)</p>
<hr />
輸入標簽：<input id="tag" type="text"/><br />
輸入文本：<input id="txt" type="text"/><br />
<input type="button" value="替換" onclick="replace()" />
</body>
</html>
在瀏覽器預覽效果如下：
