了解javascript中的Dom操作
DOM（Document Object Model）：
結(jié)點的概念：整個文檔就是由層次不同的多個節(jié)點組成，可以說結(jié)點代表了全部內(nèi)容。
結(jié)點類型
1.元素結(jié)點
2.屬性結(jié)點
3.文本結(jié)點
結(jié)點的注意點：
1.文本節(jié)點和屬性結(jié)點都看作元素結(jié)點的子結(jié)點
2.我們一般所說的結(jié)點指的就是元素結(jié)點，將html標簽看作是一個對象，并用“結(jié)點”稱呼它
3.結(jié)點的關(guān)系有：父子關(guān)系、兄弟關(guān)系
1.獲取元素結(jié)點
1)直接獲取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)間接獲取
父子關(guān)系
firstChild lastChild childNodes
子父關(guān)系
parentNode
兄弟關(guān)系
nextSibling previousSibling
2.操作屬性結(jié)點
1)通過對象“.”屬性，來操作屬性
優(yōu)：可以動態(tài)獲取用戶修改的屬性值
缺：不能獲取自定義屬性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
優(yōu)：可以獲取自定義屬性的值
缺：不能動態(tài)獲取用戶修改的屬性值
3.處理文本結(jié)點
1) 通過對象.innerText 獲取標簽內(nèi)部的文本信息
2) 通過對象.innerHTML 獲取標簽內(nèi)部的HTML代碼
4.動態(tài)改變DOM結(jié)構(gòu)
1)創(chuàng)建一個結(jié)點對象
document.createElement("標簽名")
2)（父結(jié)點）追加子結(jié)點對象
fatherNode.appendChild(子結(jié)點對象)
3)（父結(jié)點）在指定結(jié)點前添加子結(jié)點
fatherNode.insertBefore(新結(jié)點對象，參考結(jié)點對象)
4)（父結(jié)點）替換舊的子結(jié)點對象
fatherNode.replaceChild(新結(jié)點對象，舊結(jié)點對象)
5)（父結(jié)點）刪除舊子結(jié)點對象
fahterNode.removeChild(舊結(jié)點對象)
5.動態(tài)改變元素的CSS樣式（不重要）
1)我們通過對象.style屬性操作對象的css樣式：樣式名稱中有“-”將“-”去掉，并將“-”后一個字母改為大寫來作為樣式的新名稱
2)我們希望通過class為一個對象添加一個class樣式，添加屬性名是className，而并非class（class是js的關(guān)鍵字，并能作為屬性名存在）
<script type="application/javascript">
//1.獲取元素結(jié)點
//1)直接獲取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 獲取的是一個數(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 獲取第一個
console.log(father.firstChild);
// lastChild 獲取最后一個
console.log(father.lastChild);
}
// 子父關(guān)系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟關(guān)系 nextSibling 下一個對象
//previousSibling當(dāng)前結(jié)點的前一個結(jié)點返回緊鄰當(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);
//將昵稱的樣式改為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) 通過對象.innerText 獲取標簽內(nèi)部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通過對象.innerHTML 獲取標簽內(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();">點我測試1</button>
<button onclick="getEle2();">點我測試2</button>
<button onclick="getEle3();">點我測試3</button>
<button onclick="getEle4();">點我測試4</button>
<button onclick="getEle5();">點我測試5</button>
<button onclick="getEle6();">點我測試6</button>
<hr/>
<button onclick="getField1();">屬性測試1</button>
<hr/>
<button onclick="getText1();">文本測試1</button>
<button onclick="getText2();">文本測試2</button>
<button onclick="getText3();">文本測試3</button>
<button onclick="getText4();">文本測試4</button>
<hr/>
<form id="regForm">
用戶名：<input id="userid" type="text" name="username"><br/>
密碼：<input type="password" name="password"><br/>
昵稱：<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/>
愛好：狗<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="注冊">
</form>
<div id="myDiv"><b>hello</b></div>
</body>
動態(tài)改變DOM結(jié)構(gòu)
1)創(chuàng)建一個結(jié)點對象
document.createElement("標簽名")
<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();">創(chuàng)建結(jié)點對象</button>
2)（父結(jié)點）追加子結(jié)點對象
fatherNode.appendChild(子結(jié)點對象)
function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子結(jié)點對象</button>
3)（父結(jié)點）在指定結(jié)點前添加子結(jié)點
fatherNode.insertBefore(新結(jié)點對象，參考結(jié)點對象)
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é)點對象</button>
4)（父結(jié)點）替換舊的子結(jié)點對象
fatherNode.replaceChild(新結(jié)點對象，舊結(jié)點對象)
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é)點對象</button>
5)（父結(jié)點）刪除舊子結(jié)點對象
function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();">刪除子結(jié)點對象</button>
動態(tài)改變元素的CSS樣式（不重要）
<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5.動態(tài)改變元素的css樣式
1)我們通過對象.style屬性操作對象的css樣式：樣式名稱中有“-”將“-”去掉，并將“-”后一個字母改為大寫來作為樣式的新名稱
2)我們希望通過class為一個對象添加一個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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
THREE.JS入門教程(5)你應(yīng)當(dāng)知道的十件事
Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D，本文會讓你了解一下使用THREE.JS處理3D/避免SetInterval/使用倒序循環(huán)等等，感興趣的朋友可以了解下哦2013-01-01
本文續(xù)上文，繼續(xù)講述javascript的基礎(chǔ)，分為一下幾個部分：區(qū)分大小寫、標示符、注釋、語句、關(guān)鍵字和保留字，希望能給大家一些新的認識。2015-01-01
本文詳細講解了JavaScript操作DOM對象的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
Javascript中常見的校驗如：驗證一般域名校驗,手機校驗,郵箱校驗等等,下面是具體的實現(xiàn),感興趣的朋友可以參考下2014-01-01
js中的原型與原型鏈應(yīng)該是老生常談的話題了，在前端面試中基本都是必問的一個問題，但是很多人還是稀里糊涂的，只知道其表層含義。本文將帶大家深入了解JavaScript中的原型與原型鏈，感興趣的可以學(xué)習(xí)一下2022-05-05
這篇文章主要介紹了JavaScript中charAt()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
深入理解JavaScript系列（39）：設(shè)計模式之適配器模式詳解
這篇文章主要介紹了深入理解JavaScript系列（39）：設(shè)計模式之適配器模式詳解,適配器模式（Adapter）是將一個類（對象）的接口（方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個接口（方法或?qū)傩裕?需要的朋友可以參考下2015-03-03
這篇文章主要介紹了DOM基礎(chǔ)教程之事件對象的相關(guān)資料,需要的朋友可以參考下2015-01-01
Javascript動態(tài)引用CSS文件的2種方法介紹
這篇文章主要介紹了Javascript動態(tài)加載CSS文件的2種方法,經(jīng)常使用和非常實用的方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JavaScript中處理時間之setUTCMinutes()方法的使用,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06