js之DOM入門（慕課網學習筆記）
阿新 • • 發佈：2018-12-19
DOM簡介
獲得元素
document.getElementById(’’) 1、通過id獲得元素內容
document.getElementsByTagName(’’) 2、通過標籤獲得元素內容
document.getElementsByClassName(’’) 3、通過class獲得元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom簡介</title> </head> <body> <div id="intro">helloworld</div> <div id="main"> <p>The DOM is very useful.</p> </div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <script type="text/javascript"> // 通過js獲取html標籤 var intro = document.getElementById("intro"); // 通過id找html，唯一的 var main = document.getElementById("main"); var p = main.getElementsByTagName("p")[0]; //通過標籤查詢 var content1 = document.getElementsByClassName("content")[0]; //通過class獲得元素內容 </script> </body> </html>
DOMHTML(修改HTML)
- element.innerHTML=’ '//修改其中的內容
- element.getAttribute() //獲取屬性
- element.setAttribute() // 新增或者修改
- element.src //針對image
- element.href //針對a標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom html</title> </head> <body> <div id="main" data="nihao">123</div> <img src="1.jpg" id="image" /> <a id="goUrl" href="">調到百度</a> <script type="text/javascript"> var main = document.getElementById("main"); //修改其中的內容 main.innerHTML= 'helloWorld'; /** * element.getAttribute() //獲取屬性 element.setAttribute() // 新增或者修改 element.src //針對image element.href //針對a標籤 * */ //獲取屬性值 alert(main.getAttribute("data")); //修改屬性值 main.setAttribute("data", "buhao"); //新增沒有的屬性 main.setAttribute("dd", "ddname"); var image = document.getElementById("image"); //比setAttribute更方便，修改src image.src = "2.jpg"; var goUrl = document.getElementById("goUrl"); goUrl.href = "http://www.baidu.com" </script> </body> </html>
DOM-CSS（修改css）
document.getElementById("").style.color
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom css</title> </head> <body> <div id="main">helloworld</div> <script type="text/javascript"> var main = document.getElementById("main"); main.style.color = "blue"; main.style.fontSize = "100px"; </script> </body> </html>
DOM-事件
元素 動作 反應事件（這就是事件）
- 1）事件內嵌元素中
- 2）Element.onclick=function(){displayDate()};
- 3）Element.addEventListener(“click”, function(){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom 事件</title>
</head>
<body>
<!--
1、元素
2、動作
3、觸發的結果
1）事件內嵌元素中
2）Element.onclick=function(){displayDate()};
3）Element.addEventListener("click", function(){ });
-->
<!-- 第一種方式 -->
<div onclick="alert('helloworld')">按鈕</div>
<!-- 第二種方式 -->
<div id="main">我是main</div>
<!-- 第三種方式 -->
<div id="btn">我是btn</div>
<script type="text/javascript">
//第二種方式
var main = document.getElementById("main");
main.onclick = function(){
alert("main被觸發了");
}
//第三種方式
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert("btn被觸發了");
});
</script>
</body>
</html>
DOM節點
- document.createElement(“p”) //建立一個p標籤
- document.createTextNode(“新增”) //建立一段文字
- parent.appendChild(child); //將child對應的文字放到parent中
- parent.removeChild(child); //刪除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom 節點</title>
</head>
<body>
<div id="div1">
<p id="p1">我是第一個p</p>
<p id="p2">我是第二個p</p>
</div>
<script type="text/javascript">
var p = document.createElement("p"); // <p></p>
var word = document.createTextNode("我是新增的p標籤"); // 我是新增的p標籤
p.appendChild(word); //<p>我是新增的p標籤</p>
//將p標籤加入到div1中
var div1 = document.getElementById("div1");
div1.appendChild(p);
//刪除元素
var p1 = document.getElementById("p1");
div1.removeChild(p1);
</script>
</body>
</html>