一. 通過JS動態的修改HTML元素的樣式
1. 要想在js中動態的修改HTML元素的樣式,首先需要寫document,
document我們稱之為文檔對象,這個對象中保存了當前網頁中所有的HTML標簽
代碼寫法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-自定義原型對象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script>
console.log(document);
</body>
</html>
2.上面的代碼執行后,可以在瀏覽器控制台console里發現document文檔對象如下圖:
3.展開document文檔對象,我們可以發現包含了當前網頁中所有的HTML標簽.如下圖:
二. 在<script>標簽里定義對象,
把document.querySelector("#son"); 賦值給div ; 格式: div=document.querySelector("需要選擇的標簽名稱");
也就是說在document文檔對象后寫querySelector來選擇一個id叫做son 的 div盒子 賦給變量div
選擇了id選擇器后,便可以對這個ID對應 的<div>盒子修改它的樣式
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-自定義原型對象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script>
//1.通過js代碼動態的找到HTML標簽
//document我們稱之為文檔對象,這個對象中保存了當前網頁中所有的HTML標簽
//2.如何通過JS動態的修改HTML元素的樣式
var div=document.querySelector("#son");
console.log(div);
div.style.width="200px";
div.style.height="200px";
div.style.backgroundColor="red";
div.style.borderRadius="50%";
</script>
</body>
</html>
三.如何動圖的創建一個HTML元素,
方法基本如上,
只是document后的querySelector改為createElement.
//如何動態的創建一個HTML元素 //格式: document. createElement. ("標簽的名稱") var div=document. createElement. ("div") var div=document. createElement. ("p") var div=document. createElement. ("span")
四.如何動態創建的元素添加到另一個元素中
1. 比如需要在<div>盒子標簽里創建<p>標簽
1.1 首先選擇需要創建元素或者標簽的標簽div, 然后在調用賦值給對象div.
格式: var div=document.querySelector("div");
1.2 然后創建p標簽,並賦值給對象p
格式: var p=document.createElement("p");
1.3 然后把創建的<p>標簽傳入到調用的元素<div>標簽里.
格式: 元素對象.appendChild(元素對象)
代碼: div. appendChild(p);
代碼如下所示:
var div=document.querySelector("div"); var p=document.createElement("p"); div. appendChild(p);
五.如何刪除一個指定元素或標簽
代碼如下:
// 如何刪除一個指定元素 var div=document.querySelector("div>a"); console.log(a) ; // 通過訪問一個元素對象的parentElement, 可以找到當前元素對象的父元素(父節點) console.log(a. parentElement) ; //通過一個元素的父元素調用removeChild方法, 就可以講該父元素中指定的子元素刪除 a. parentElement. removeChild(a) ;
六. 在js中如何不斷的重復執行某一段代碼?
1.方法一:
代碼如下圖:
注釋: 圖中代碼里的seInterval(test, 1000);括號里的第一個參數test參數是被執行的函數test;
第二個參數是毫秒,也就是需要隔多少時間執行一次.
//在js中如何不斷的重復執行某一段代碼 ? function test(){ console.log ("test") } //每隔多少毫秒執行一次第一個參數(test函數) setInterval(test, 1000) ;
2.方法二:
在企業開發中常用的方法: 給seInterval傳一個匿名函數,然后每隔1000毫秒執行一下匿名函數,
代碼如下:
var nm=1 ; function test(){ console.log ("test") } setInterval(function (){ console.log ("test", num) ; num++ ; }, 1000) ; //每執行一次匿名函數的代碼塊,就執行增量表達式num++.