了解javascript中的Dom操作
DOM（Document Object Model）：
結(jié)點(diǎn)的概念：整個(gè)文檔就是由層次不同的多個(gè)節(jié)點(diǎn)組成，可以說(shuō)結(jié)點(diǎn)代表了全部?jī)?nèi)容。
結(jié)點(diǎn)類(lèi)型
1.元素結(jié)點(diǎn)
2.屬性結(jié)點(diǎn)
3.文本結(jié)點(diǎn)
結(jié)點(diǎn)的注意點(diǎn)：
1.文本節(jié)點(diǎn)和屬性結(jié)點(diǎn)都看作元素結(jié)點(diǎn)的子結(jié)點(diǎn)
2.我們一般所說(shuō)的結(jié)點(diǎn)指的就是元素結(jié)點(diǎn)，將html標(biāo)簽看作是一個(gè)對(duì)象，并用“結(jié)點(diǎn)”稱(chēng)呼它
3.結(jié)點(diǎn)的關(guān)系有：父子關(guān)系、兄弟關(guān)系
1.獲取元素結(jié)點(diǎn)
1)直接獲取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)間接獲取
父子關(guān)系
firstChild lastChild childNodes
子父關(guān)系
parentNode
兄弟關(guān)系
nextSibling previousSibling
2.操作屬性結(jié)點(diǎn)
1)通過(guò)對(duì)象“.”屬性，來(lái)操作屬性
優(yōu)：可以動(dòng)態(tài)獲取用戶(hù)修改的屬性值
缺：不能獲取自定義屬性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
優(yōu)：可以獲取自定義屬性的值
缺：不能動(dòng)態(tài)獲取用戶(hù)修改的屬性值
3.處理文本結(jié)點(diǎn)
1) 通過(guò)對(duì)象.innerText 獲取標(biāo)簽內(nèi)部的文本信息
2) 通過(guò)對(duì)象.innerHTML 獲取標(biāo)簽內(nèi)部的HTML代碼
4.動(dòng)態(tài)改變DOM結(jié)構(gòu)
1)創(chuàng)建一個(gè)結(jié)點(diǎn)對(duì)象
document.createElement("標(biāo)簽名")
2)（父結(jié)點(diǎn)）追加子結(jié)點(diǎn)對(duì)象
fatherNode.appendChild(子結(jié)點(diǎn)對(duì)象)
3)（父結(jié)點(diǎn)）在指定結(jié)點(diǎn)前添加子結(jié)點(diǎn)
fatherNode.insertBefore(新結(jié)點(diǎn)對(duì)象，參考結(jié)點(diǎn)對(duì)象)
4)（父結(jié)點(diǎn)）替換舊的子結(jié)點(diǎn)對(duì)象
fatherNode.replaceChild(新結(jié)點(diǎn)對(duì)象，舊結(jié)點(diǎn)對(duì)象)
5)（父結(jié)點(diǎn)）刪除舊子結(jié)點(diǎn)對(duì)象
fahterNode.removeChild(舊結(jié)點(diǎn)對(duì)象)
5.動(dòng)態(tài)改變?cè)氐腃SS樣式（不重要）
1)我們通過(guò)對(duì)象.style屬性操作對(duì)象的css樣式：樣式名稱(chēng)中有“-”將“-”去掉，并將“-”后一個(gè)字母改為大寫(xiě)來(lái)作為樣式的新名稱(chēng)
2)我們希望通過(guò)class為一個(gè)對(duì)象添加一個(gè)class樣式，添加屬性名是className，而并非class（class是js的關(guān)鍵字，并能作為屬性名存在）
<script type="application/javascript">
//1.獲取元素結(jié)點(diǎn)
//1)直接獲取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 獲取的是一個(gè)數(shù)組
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
// 獲取指定位置
console.log(sons[1]);
// firstChild 獲取第一個(gè)
console.log(father.firstChild);
// lastChild 獲取最后一個(gè)
console.log(father.lastChild);
}
// 子父關(guān)系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟關(guān)系 nextSibling 下一個(gè)對(duì)象
//previousSibling當(dāng)前結(jié)點(diǎn)的前一個(gè)結(jié)點(diǎn)返回緊鄰當(dāng)前元素之前的元素
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
//將昵稱(chēng)的樣式改為password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
// 可以獲取改變后的屬性
console.log(obj.value)
// 只能獲取初始定義的屬性
console.log(obj.getAttribute("value"));
}
// 1) 通過(guò)對(duì)象.innerText 獲取標(biāo)簽內(nèi)部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通過(guò)對(duì)象.innerHTML 獲取標(biāo)簽內(nèi)部的HTML代碼
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
// 添加文本
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "<img src='1.jpg' />";
}
// 添加代碼
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<img src='1.jpg' />";
}
</script>
</head>
<body>
<button onclick="getEle1();">點(diǎn)我測(cè)試1</button>
<button onclick="getEle2();">點(diǎn)我測(cè)試2</button>
<button onclick="getEle3();">點(diǎn)我測(cè)試3</button>
<button onclick="getEle4();">點(diǎn)我測(cè)試4</button>
<button onclick="getEle5();">點(diǎn)我測(cè)試5</button>
<button onclick="getEle6();">點(diǎn)我測(cè)試6</button>
<hr/>
<button onclick="getField1();">屬性測(cè)試1</button>
<hr/>
<button onclick="getText1();">文本測(cè)試1</button>
<button onclick="getText2();">文本測(cè)試2</button>
<button onclick="getText3();">文本測(cè)試3</button>
<button onclick="getText4();">文本測(cè)試4</button>
<hr/>
<form id="regForm">
用戶(hù)名：<input id="userid" type="text" name="username"><br/>
密碼：<input type="password" name="password"><br/>
昵稱(chēng)：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性別：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
愛(ài)好：狗<input type="checkbox" name="fav" value="dog">
貓<input type="checkbox" name="fav" value="cat">
羊駝<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注冊(cè)">
</form>
<div id="myDiv"><b>hello</b></div>
</body>
動(dòng)態(tài)改變DOM結(jié)構(gòu)
1)創(chuàng)建一個(gè)結(jié)點(diǎn)對(duì)象
document.createElement("標(biāo)簽名")
<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();">創(chuàng)建結(jié)點(diǎn)對(duì)象</button>
2)（父結(jié)點(diǎn)）追加子結(jié)點(diǎn)對(duì)象
fatherNode.appendChild(子結(jié)點(diǎn)對(duì)象)
function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子結(jié)點(diǎn)對(duì)象</button>
3)（父結(jié)點(diǎn)）在指定結(jié)點(diǎn)前添加子結(jié)點(diǎn)
fatherNode.insertBefore(新結(jié)點(diǎn)對(duì)象，參考結(jié)點(diǎn)對(duì)象)
function changeDom3() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子結(jié)點(diǎn)對(duì)象</button>
4)（父結(jié)點(diǎn)）替換舊的子結(jié)點(diǎn)對(duì)象
fatherNode.replaceChild(新結(jié)點(diǎn)對(duì)象，舊結(jié)點(diǎn)對(duì)象)
function changeDom4() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替換子結(jié)點(diǎn)對(duì)象</button>
5)（父結(jié)點(diǎn)）刪除舊子結(jié)點(diǎn)對(duì)象
function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();">刪除子結(jié)點(diǎn)對(duì)象</button>
動(dòng)態(tài)改變?cè)氐腃SS樣式（不重要）
<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5.動(dòng)態(tài)改變?cè)氐腸ss樣式
1)我們通過(guò)對(duì)象.style屬性操作對(duì)象的css樣式：樣式名稱(chēng)中有“-”將“-”去掉，并將“-”后一個(gè)字母改為大寫(xiě)來(lái)作為樣式的新名稱(chēng)
2)我們希望通過(guò)class為一個(gè)對(duì)象添加一個(gè)class樣式，添加屬性名是className，而并非class（class是js的關(guān)鍵字，并能作為屬性名存在）
*/
function fontGreater(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv);
myDiv.style.fontSize = "36px";
myDiv.style.fontFamily = "宋體";
}
function changeFont(){
var myDiv = document.getElementById("myDiv");
myDiv.className = "addstyle";
//myDiv.setAttribute("class","addstyle");
}
</script>
</head>
<body>
<button onclick="fontGreater()">放大字體</button>
<button onclick="changeFont()">添加樣式</button>
<div id="myDiv" >你好世界！</div>
</body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類(lèi)型 （字符串 String）
javascript一共有9種數(shù)據(jù)類(lèi)型，分別是字符串 String、數(shù)值型 Number、布爾型 Boolean、未定義 Undefine、空值 Null、對(duì)象 Object、引用Refernce、列表型 List、完成型 Completion，我們今天首先來(lái)看看（字符串 String）2015-01-01
深入理解JavaScript系列（33）：設(shè)計(jì)模式之策略模式詳解
這篇文章主要介紹了深入理解JavaScript系列（33）：設(shè)計(jì)模式之策略模式詳解,策略模式定義了算法家族,分別封裝起來(lái),讓他們之間可以互相替換,此模式讓算法的變化不會(huì)影響到使用算法的客戶(hù),需要的朋友可以參考下2015-03-03
在JavaScript中操作數(shù)組之map()方法的使用
這篇文章主要介紹了在JavaScript中操作數(shù)組之map()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
總結(jié)JavaScript設(shè)計(jì)模式編程中的享元模式使用
享元模式最適合于解決因創(chuàng)建大量類(lèi)似對(duì)象而累及性能的問(wèn)題,本文將來(lái)總結(jié)JavaScript設(shè)計(jì)模式編程中的享元模式使用,包括在DOM操作時(shí)的利用示例:2016-05-05
這篇文章主要介紹了javascript中clone對(duì)象的方法,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)?lái)一篇JavaScript_ECMA5數(shù)組新特性詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了JavaScript中的函數(shù)嵌套使用,是JavaScript入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript DOM 學(xué)習(xí)第九章 選取范圍的介紹
javascript幾個(gè)易錯(cuò)點(diǎn)記錄