JavaScript DOM 基礎操作

阿新 • • 發佈：2022-01-18

JavaScript DOM 基礎操作

一、獲取元素的六方式

document.getElementById('id名稱')   //根據id名稱獲取             
document.getElementsByclassName('元素類名') //根據元素類名獲取   返回值：偽陣列
document.getElementsByTagName('元素類名')   //根據元素標籤獲取   返回值：偽陣列
document.querySelector('選擇器')   //根據選擇器獲取第一個元素
document.querySelectorAll('選擇器') //根據選擇器獲取所有元素      返回值：偽陣列

二、操作元素內容

1.獲取元素文字內容

格式：

獲取內容：元素 . innrtText

修改內容：元素 . innerText="修改的內容"

//點選div盒子改變裡面的文字

<div Style="background:red" id="JD">我是舊的內容</div>

//獲取元素(通過標籤選擇器來獲取內容)
var ele=document.querySelector('div')
//獲取元素(通過id獲取元素)
var btn=document.getElementById('JD')

//獲取元素文字內容並輸出
console.log(ele.innerText)

//給div一個點選事件(這裡用的是id獲取到的div元素)
btn.onclick=function(){
    //重新為div設定新的內容
    ele.innerText="我重生了"
}

2.操作元素超文字內容（直接修改程式碼）

格式：

獲取內容：元素 . innrtHTML

修改內容：元素 . innerHTML="新的標籤"

//點選div盒子把div變成p標籤
<div style="background:red" id="JD">我是div盒子</div>

//獲取元素(通過標籤選擇器來獲取內容)
var ele=document.querySelector('div')
//獲取元素(通過id獲取元素)
var btn=document.getElementById('JD')

//獲取元素的標籤裡的內容以文字的方式並輸出
console.log(ele.innerHTML)

//給div一個點選事件(這裡用的是id獲取到的div元素)
 btn.onclick=function(){
    //把div盒子變成p標籤
    ele.innerHTML="<p>我變成了p標籤了，嚶嚶嚶！</p>"
}

三、操作元素屬性

1.原生屬性（type、id、src）

格式：

獲取屬性：元素 . 屬性名

設定屬性：元素 . 屬性名=”屬性值“

//點選圖片改變圖片背景連結達到來回切換背景的效果
   
      //html
<img scr="../img/bg1.jpg" id="bg">

    
      //JavaScript
//獲取元素(通過id獲取元素)
var btn=document.getElementById('bg')
//獲取元素scr的路徑並輸出
console.log(btn.src)
var tes=0    //控制切換的圖片
//給img一個點選事件(這裡用的是id獲取到的img元素)
 btn.onclick=function(){
     if(tes===0){
     btn.src="../img/bg2.jpg" 
      tes=1
     }else{
      btn.src="../img/bg1.jpg" 
         tes=0
}

2.定義和操作自定義屬性

（1）定義屬性

定義格式：data-*

<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
</head>

<body>
<div style="wight:500px;height:500px;background:black"  data-a="p1" id="ab"> p1
  <div style="wight:150px;height:150px;background:green" data-a="p2">p2</div>
  <div  style="wight:150px;height:150px;background:blue" data-a="p3">p3</div>
</div>
<script>  
		//獲取到父的div元素
		var divab=document.getElementById("ab")
		
		//點選點選子元素父元素的事件也會被觸發
		divab.onclick=function(e){
			//用自定義屬性來判斷點的是子元素，還是父元素。
         if(e.target.dataset.a==="p1"){
	     console.log("p1")
       }
            if(e.target.dataset.a==="p2"){
	      console.log("p2")
       }
            if(e.target.dataset.a==="p3"){
	     console.log("p3")
       }
         
     }
	 
    </script>
</body>
</html>

（2）操作自定義屬性

操作自定義屬性格式：

獲取屬性：元素 . getAttribute("屬性名")

設定屬性：元素 . setAttribute("屬性名"，”屬性值“)

刪除屬性：元素 . removeAttribute("屬性名")

//html
<div id="tes" data-cs="Hello Wrold">自定義屬性測試</div>

//JavaScript

//獲取元素
var ter=document.getElmentById("tes")

//獲取自定義屬性並輸出
console.log(ter.getAttribute(CS))
//重新給自定義屬性CS賦值
ter.setAttribute("CS","Hello man")
//刪除自定義屬性
ter.removeAttribute("CS")

四、操作元素類名

格式：

獲取類名：元素 . className

設定類名：元素 . className="新類名"

//點選div盒子和實現改變背景顏色

//設定類名改變div的背景色
.divBgRed{
background:red;
}
.divBgBlue{
background:blue;
}

<div class="divBgRed" id="divid">我是可以變顏色的盒子</div>

//獲取div的元素
var divid=document.getElementById("divid")

divid.onclick=function(){
    divid.className="divBgBlue"
}

五、操作元素行內樣式

格式：

獲取行內樣式：元素 .style . 樣式名

設定行內樣式：元素 . style.樣式名="樣式值"

//輸出和修改行內樣式
<div style="background-color:red;width=100px" id="divid">我是紅色的div盒子</div>

var tre=document.getElementById("divid")

console.log(tre.style.backgroundColor)    //當行內樣式有短橫線時，把短橫線去掉變成駝峰寫法

tre.onclick=function(){
    tre.style.background="blue"
    tre.style.width="500px"
}

六、獲取非行內樣式

格式：window . getComputedStyle(元素) . 樣式名

注意：行內樣式和非行內樣式都可以獲取

七、節點操作(標籤)

1.建立結點（標籤）

格式：document.creatElement("標籤名稱")

var div=document.creatElement("div")
var p=document.creartElement("p")

2.插入結點（標籤）

格式：

**父節點的元素 . appendChild(子節點) ** //預設在最後插入

父節點元素 . insertBefore(要插入的節點，哪一個你節點的前面)

<<body>
	<div>
		<span>我是span標籤</span>
	     <ul>我是ul標籤</ul>
	</div>
<script>
//問題1：在ul標籤裡面的最後位置插入li標籤
	//獲取ul標籤的元素
var ul=document.querySelector("ul")
//建立li標籤
var li=document.createElement("li")
//在ul標籤裡插入li標籤
ul.appendChild(li)

//問題2：在div裡的span標籤前面插入入一個p標籤
	//獲取div父元素
	var div=document.querySelector("div")
	//獲取要插入位置的後一個標籤的元素
	var span=document.querySelector("span")
	//建立要插入的p標籤
	var p=document.createElement("p")
	//在相應位置插入p標籤
	div.insertBefore(p,span)
      
</script>
</body>

3.刪除節點（標籤）

格式：

父節點元素 . removeChild(子節點)

想刪除節點元素 . remove()

<body>
 <div> 
    <span>標籤</span>
 </div>
</body>

<script>
    //獲取父標籤的元素
  var div=document.querySelector("div")
  //刪除span標籤
  div.removeChild(span)
    
    //獲取要刪除span標籤的元素
   var span=ocument.querySelector("span")
   //刪除span標籤
   span.remove()
</script>

4.替換節點（標籤）

格式：

父節點元素 . replaceChild(換上節點，換下節點)

<body>
 <div> 
    <span>標籤</span>
 </div>
</body>

<script>
    //獲取span標籤的父元素
    var div=document.querySelector("div")
    //建立p標籤
    var p=document.creartElement("p") 
    //獲取span標籤的元素
    var span=document.querySelector("span")
    //把span標籤替換成p標籤，裡面的內容不變
    div.replaceChild(p,span)
</script>

5.克隆節點（標籤）

說明：就是把想要的標籤複製一份，需要結合插入標籤才能有用（相對於複製和貼上）

格式：

想要克隆標籤的元素 . cloneNode(是否克隆後代節點)

//問題：把div標籤複製一份，並複製裡面的子元素
<body>
 <div> 
    <span>標籤</span>
 </div>
</body>

<script>
    //獲取div標籤的元素
   var div=document.querySelector("div")
  //克隆div標籤並克隆裡面的子元素
   var cle=div.cloneNode(true)
   
   //把複製的div標籤插入到原來div後面
       //獲取body標籤的元素
    var body=document.querySelector("body")
        //插入div標籤
    body.appendChild(cle)
   
</script>

本文來自部落格園，作者：永恆之月TEL，轉載請註明原文連結：https://www.cnblogs.com/akc4/p/15817278.html