lucky出品 必屬精品
DOM操作
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹
DOM樹
[圖片上傳失敗...(image-c84426-1632303994282)]
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
一、查找 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
- 通過 id 找到 HTML 元素
- 通過標簽名找到 HTML 元素
- 通過類名找到 HTML 元素
1、通過 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。
本例查找 id="intro" 元素：
實例
var x=document.getElementById("intro");
如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null
2、通過標簽名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
實例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通過類名找到 HTML 元素
本例通過 getElementsByClassName 函數來查找 class="intro" 的元素：
實例
var x=document.getElementsByClassName("intro");
二、HTML DOM - 改變 HTML
1、改變 HTML 內容（innerHTML/innerText）
修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內容：
實例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
實例講解：
- 上面的 HTML 文檔含有 id="p1" 的 <h1> 元素
- 我們使用 HTML DOM 來獲得 id="p1" 的元素
- JavaScript 更改此元素的內容 (innerHTML)
document.getElementById(id).innerText=新的文本內容
注意:
- innerHTML是可以獲取節點內 標簽和內容
- innerText 只能獲取節點內的文本內容
- innerHTML可以設置html和文本一起的內容 HTML標簽會被瀏覽器所解析
- innerText不可以設置html和文本一起的內容 HTML標簽不會被瀏覽器所解析
2、改變 HTML 屬性 (attribute)
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img src="http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg" onclick="this.src='http://pic.58pic.com/58pic/13/80/78/35V58PICrWD_1024.jpg'" alt="">
注意：在jQuery里不能改變input的type類型 出于安全性，只能是只讀 如更改input的type
- js設置密碼的顯示隱藏
<input type="text" value="" name="xxx">
<button onclick="pas();">更改為密碼</button>
<button onclick="text();">更改為文本顯示</button>
function pas(){
var i = document.getElementsByTagName('input')[0];
i.type = 'password'
}
function text(){
var i = document.getElementsByTagName('input')[0];
i.type = 'text'
}
script>
function change() {
var input = document.getElementsByTagName('input')[0];
var span = document.getElementsByTagName('span')[0];
if(span.innerHTML == '顯示'){
input.type = 'text';
span.innerHTML = '隱藏';
}else{
input.type = 'password';
span.innerHTML = '顯示';
}
}
</script>
</head>
<body>
密碼<input type="password"><span onclick="change();">顯示</span>
</body>
三 HTML DOM - 改變CSS
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
1、改變 HTML 樣式 （style.property）
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=新樣式
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
document.getElementById("p2").style.backgroundImage="url(2.jpg)";
</script>
<p>以上段落通過腳本修改。</p>
</body>
</html>
-
獲取生效style樣式
window.getComputedStyle("元素", "偽類");
style = window.getComputedStyle(box, null); //支持IE9+及非IE瀏覽器
style = window.getComputedStyle(box, null).width;獲取box的width屬性值-
和style區別
box.style.xxx 只能獲取內聯樣式
getComputedStyle 獲取的生效樣式可以獲取全局的樣式
實例
-
<style>
#div{
width:200px;
height: 200px;
}
</style>
<script>
window.onload = function (ev) {
var div = document.getElementById('div');
// console.log(div.style.backgroundColor)
// console.log(div.style.width)
var style = window.getComputedStyle(div,null);
console.log(style.width);
console.log(style.height);
console.log(style.backgroundColor);
}
</script>
</head>
<body>
<div id="div" style="background-color: red;"></div>
</body>
</html>
2、設置多個css樣式
- 設置cssText
element.style.cssText = "樣式1;樣式2..."
div.style.cssText = 'width:200px;height: 200px;background-color: red';
- 設置style的屬性
element.setAttribute('style', 'height: 100px !important');
-
設置id或者class名稱
//設置id element.setAttribute('id, 'id名稱'); element.id = id名稱； //設置class element.setAttribute('class, 'class名稱'); element.className = class名稱； 設置多個class element.className = '樣式1 樣式2'; element.setAttribute('class','樣式1 樣式2')
- 通過add方法添加多個類名
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
classList
classList 屬性返回元素的類名，作為 DOMTokenList 對象。
該屬性用于在元素中添加，移除及切換 CSS 類。
classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。
3、使用事件
HTML DOM 允許我們通過觸發事件來執行代碼。
比如以下事件：
- 元素被點擊。
- 頁面加載完成。
- 輸入框被修改。
在接下來的章節，你會學到更多關于事件的知識。
本例改變了 id="id1" 的 HTML 元素的樣式，當用戶點擊按鈕時：
實例
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的標題 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
點我!</button>
</body>
</html>
四、HTML DOM 事件
對事件做出反應
我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。
如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖像已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
1、onclick 點擊事件
onclick = javascript
實例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
</body>
</html>
本例從事件處理器調用一個函數：
onclick="changetext(this)"
實例
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>
2、使用 HTML DOM 來分配事件
HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：
-
實例
向 button 元素分配 onclick 事件：
<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p> <button id="myBtn">點這里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> -
阻止右鍵菜單默認行為：
在之前使用event對象的button屬性時, 點擊鼠標右鍵會彈出系統菜單, 如果我們想要創建自己的右鍵菜單, 則需要先阻止默認的右鍵菜單
document.oncontextmenu = function(){ console.log("右鍵被按下"); return false; }不使用監聽事件的停止傳播(不再派發事件)
-
當標簽進行嵌套時
event.stopPropagation();[prɑp??ɡe??n]
<script> onload = function(){ var divOne = document.getElementById('divOne'); var divTwo = document.getElementById('divTwo'); divOne.onclick = function(){ alert('點擊了one'); } divTwo.onclick = function(e){ alert('點擊了two'); e.stopPropagation();//停止時間的傳播(不在派發事件) } </script> </head> <body> <div id="divOne">one <div id="divTwo">two</div> </div>e是事件，在firefox中只能在事件現場使用window.event，所以只有把event傳給函數使用。為了兼容FF和其它瀏覽器，一般會在函數里重新給e賦值：
e = window.event || e;
也就是說，如果window.event存在，則該瀏覽器支持直接使用window.event，否在就是不支持，不支持就使用傳進來的e。e是event，其中包含鼠標事件的各種信息
event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。事件通常與函數結合使用，函數不會在事件發生前被執行！
3、onload 和 onunload 事件
onload 事件會在頁面或圖像加載完成后立即發生。
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。
onload 和 onunload(了解) 事件可用于處理 cookie。
onunload 關閉當前頁面的操作時候的操作(了解)
實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>彈窗-提示瀏覽器 cookie 是否可用。</p>
</body>
</html>
4、onchange 當文本框(input 或 textarea)內容改變且失去焦點后觸發。
onchange 事件常結合對輸入字段的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。
實例
<script>
function upperCase(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase()">
<select onchange="alert(this.value);">
<option value="1">北京</option>
</body>
----------------------------------------------------------------------------------------
<script>
function upperCase(this){
this.value=this.value.toUpperCase();
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase(this)">
</body>
<input type="text" id="fname" onchange="this.value = this.value.toUpperCase();">
onselect：當用戶選擇文本框(input 或 textarea)中的內容觸發
<script>
function showMsg()
{
alert("您選中了一些文本！");
}
</script>
</head>
<body>
一些文本：<input type="text" value="請選中我！" onselect="showMsg()">
<p>函數 showMsg() 在輸入字段中的文本被選中時觸發。此函數顯示一段消息。</p>
5、 onfocus/onblur 獲取焦點/失去焦點
輸入框獲取焦點 的事件
實例:
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
輸入你的名字: <input type="text" onfocus="myFunction(this)" onblur="this.style.backgroundColor='red'">
<p>當輸入框獲取焦點時，修改背景色（background-color屬性） 將被觸發。</p>
6、onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
實例:
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
7、onmouseenter 和 onmouseleave 事件
事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
over 和 enter的區別
如果元素沒有子元素的時候，效果完全一樣
-
如果元素包含子元素
當由父元素進入子元素的時候，over會繼續觸發
over實際上只要在跨越邊界的時候，就會進行觸發
-
onmousemove
鼠標移動
實例(包含了onmousemove onmouseenter. onmouseover)
<style> div { width: 100px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px;d text-align: center; background-color: lightgray; } p { background-color: white; } </style> </head> <body> <h3>該實例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3> <p> onmousemove 事件在鼠標移動到 div 元素上時觸發。</p> <p> mouseenter 事件中有在鼠標指針進入 div 元素時觸發。 </p> <p> onmouseover 事件在鼠標指針進入 div 元素時觸發,在子元素上也會觸發(p 和 span)。</p> <div onmousemove="myMoveFunction()"> <p>onmousemove: <br> <span id="demo">鼠標移動到我這!</span></p> </div> <div onmouseenter="myEnterFunction()"> <p>onmouseenter: <br> <span id="demo2">鼠標移動到我這!</span></p> </div> <div onmouseover="myOverFunction()"> <p>onmouseover: <br> <span id="demo3">鼠標移動到我這!</span></p> </div> <script> x = 0; y = 0; z = 0; function myMoveFunction() { document.getElementById("demo").innerHTML = z+=1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x+=1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y+=1; } </script>
8、onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件。
實例:
<p onmousedown="this.innerHTML='mousedown'" onmouseup="this.innerHTML='out了'">點擊</p>
<h1 onclick="console.log(this)" onmousedown="console.log('over')" onmouseup="console.log('up')">點擊文本!</h1>
9、事件對象 event(隱藏參數)
鼠標事件
clientX: 瀏覽器可視區域的x坐標
clientY: 瀏覽器可視區域的y坐標
clientX:跟screenX相比就是將參照點改成了瀏覽器內容區域的左上角，該參照點會隨之滾動條的移動而移動。
pageX: 瀏覽器內容區域的x坐標
pageY: 瀏覽器內容區域的y坐標
pageX：參照點也是瀏覽器內容區域的左上角，但它不會隨著滾動條而變動
screenX: 顯示器屏幕的x坐標
screenY: 顯示器屏幕的y坐標
screenX:鼠標位置相對于用戶屏幕水平偏移量，而screenY也就是垂直方向的，此時的參照點也就是原點是屏幕的左上角。
offsetX: 鼠標點擊的元素位置距離元素左邊界的x坐標
offsetY: 鼠標點擊的元素位置距離元素上邊界的y坐標
例如:
document.onmousedown= function(evt) {
var e = evt ;
console.log(e.clientX + ',' + e.clientY);
console.log(e.screenX + ',' + e.screenY);
console.log(e.pageX + “,” + e.pageY);
};
10、鍵盤事件
- onkeydown 鍵盤按住不放會一直觸發 任意鍵
- onkeypress 鍵盤按住不放會一直觸發 字符鍵
- onkeyup：當用戶釋放鍵盤上的某個鍵觸發。
鍵碼 : keyCode屬性
所有按鍵(包括功能鍵control, alt,shift, tab, 方向鍵等, 不包括亮度,音量..的按鍵)在發生 keydown和keyup 事件時，event對象的 keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符集，keyCode屬性的值與 ASCII 碼中對應.
document.onkeydown = function(evt) {
var e = evt ;
console.log(e.keyCode); //按任意鍵，得到相應的 keyCode
String.fromCharCode(e.keyCode) //獲對應字符
};
注意: 大寫字母或小寫的編碼相同, 都為大寫字母。
字符編碼: charCode屬性
Firefox,Chrome和Safari的event對象支持charCode屬性,只有按下字符鍵并且使用keypress事件時才會得到charCode,這個charCode的值和UniCode碼對應,和keyCode也類似,但是charCode的字母區分大小寫.(字符鍵:數字,字母(區分大小寫),字符,空格,回車)
實例
document.onkeypress =function(evt) {
var e= evt ;
console.log(e.charCode);
}
注：可以使用String.fromCharCode()將 Unicode編碼轉換成實際的字符
11、HTML DOM EventListener 事件監聽
可以對一個element綁定多個同樣的事件 且不會被覆蓋
-
addEventListener() 方法
語法
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發后調用的函數。
第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。
- 實例:
在用戶點擊按鈕時觸發監聽事件：
//使用函數名，來引用外部函數: <p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p> <button id="myBtn">點我</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> //直接添加函數體 element.addEventListener("click", function(){ alert("Hello World!"); }); //不使用事件監聽的情況 window.onload = function(){ var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("第一個事件"); } btn.onclick = function(){ alert("第二個事件"); } btn.onclick = function(){ alert("第三個事件"); } } 最后只輸出：第三個事件，因為后一個方法都把前一個方法覆蓋掉了
| [圖片上傳失敗...(image-461478-1632303994283)] | 注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。 |
|---|---|
-
向同一個元素中添加多個事件句柄
addEventListener() 方法允許向同一個元素添加多個事件，且不會覆蓋已存在的事件：
-
實例
element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction);你可以向同個元素添加不同類型的事件：
-
實例
element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction);
-
-
向 Window 對象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其他支出的事件對象如: xmlHttpRequest 對象。
- 實例
當用戶重置窗口大小時添加事件監聽：
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = document.body.scrollWidth+''+document.body.scrollHeight; }); 傳遞參數
當傳遞參數值時，使用"匿名函數"調用帶參數的函數：
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
- 事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將<p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在 冒泡 中，內部元素的事件會先被觸發，然后再觸發外部元素，即：<p> 元素的點擊事件先觸發，然后會觸發 <div> 元素的點擊事件。
在 捕獲 中，外部元素的事件會先被觸發，然后才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然后再觸發 <p> 元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：
addEventListener(event, function, useCapture);
默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。
實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<p>實例演示了在添加不同事件監聽時，冒泡與捕獲的不同。</p>
<div id="myDiv">
<p id="myP">點擊段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">點擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你點擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你點擊了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你點擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你點擊了 DIV2 元素 !");
}, true);
</script>
</body>
</html>
組織當標簽嵌套時候的冒泡擴散
<script>
onload = function () {
var divOne = document.getElementById('div_one');
var divTwo = document.getElementById('div_two');
divOne.style.cssText = 'width:100%;height:400px;background-color:red;';
divTwo.style.cssText = 'width:100%;height:200px;background-color:green;';
divOne.addEventListener('click',function (evt) {
console.log('紅')
})
divTwo.addEventListener('click',function (evt) {
console.log('綠')
evt.stopPropagation();//阻止擴散
})
};
</script>
</head>
<body>
<div id="div_one">
<div id="div_two"></div>
</div>
</body>
</html>
-
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <head> <style> #myDIV { background-color: coral; border: 1px solid; padding: 50px; color: white; } </style> </head> <body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內移動時會顯示隨機數。 <p>點擊按鈕移除 DIV 的事件句柄。</p> <button onclick="removeHandler()" id="myBtn">點我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); document.getElementById("demo").style.backgroundColor = 'rgb('+Math.floor(255*Math.random())+','+Math.floor(255*Math.random())+','+Math.floor(255*Math.random()); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script> </body> </html>
12、HTML DOM 元素(節點)
創建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。
-
創建節點
document.createElement('標簽名')
-
創建文本節點
document.createTextNode("文本內容")
-
添加節點
節點名.appendChild("node")
或者
節點名.innerText = '文本的內容';
-
從父元素中刪除子元素
parent.removeChild(child);
例如:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);ul.removeChild(ul.lastElementChild);//刪除節點
-
cloneNode() 方法
定義和用法
cloneNode() 方法創建節點的拷貝，并返回該副本。
cloneNode(true) 方法克隆所有屬性以及它們的值。
如果您需要克隆所有后代，請把 deep 參數設置 true，否則設置為 false。
實例
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <hr> <ul> </ul> <script> var node = document.getElementsByTagName('ul')[0]; var node1 = document.getElementsByTagName('ul')[1]; var newLi = document.createElement('li') newLi.innerText = '新的' l = node.children.length; for(var i=0;i<l;i++){ var x = node.children[i].cloneNode(true); node1.appendChild(x) } </script>
-
element.replaceChild() 替換元素中的子節點
document.getElementById("myList").replaceChild(newnode,oldnode);實例
document.getElementById("ul").replaceChild(document.getElementsByTagName('li')[1] ,document.getElementsByTagName('li')[0]);
-
獲取父節點
node.parentNode
-
獲取父類的第一個節點/最后一個
node.parentNode.firstChild 如果父類換行才是第一個子標簽 那么會是空白
node.parentNode.lastChild 獲取最后一個節點
firstChild//第一個HTML存在換行則會獲取空白節點 lastChild//最后一個HTML存在換行則會獲取空白節點 firstElementChild lastElementChild注意:因為第一個是空白節點 原因是 代碼換行 如果不換行第一個就是正常的標簽
-
前一個同胞節點
previousSibling 如果前一個HTML存在換行則會獲取空白節點
previousElementSibling 前一個兄弟節點是否換行不會造成影響
注釋：如果沒有 previousSibling 節點，則返回值是 null。
后一個同胞節點
nextElementSibling 后一個兄弟節點是否換行不會造成影響
-
獲取所有子節點
node.children
-
返回元素的標簽名。
element.tagName
-
從元素中移除指定屬性
removeAttribute(name)
console.log(document.getElementById("ul").removeAttribute('id')); -
在指定的已有的子節點之前插入新節點。
element.insertBefore(新的節點,插入節點的位置)
<ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">請點擊按鈕向列表插入一個項目。</p> <button onclick="myFunction()">試一下</button> <script> function myFunction() { var newItem=document.createElement("LI") var textnode=document.createTextNode("Water") newItem.appendChild(textnode) var list=document.getElementById("myList") list.insertBefore(newItem,list.childNodes[0]); } </script>
節點添加
實例
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
