1.DOM(document object model)即檔案物件模型，DOM是JS中內置的參考型別document物件，DOM物件常用來操作節點(標簽)，如：操作節點樣式等，
2.節點樹：html檔案中節點的關系，節點(標簽)在JS中屬于參考型別資料，
3.DOM四個屬性
<script type="text/javascript">
console.log(document.documentElement);//獲取<html>標簽
console.log(document.head);//獲取<head>標簽
console.log(document.title);//獲取<title>標簽的文本
console.log(document.body);//獲取<body>
</script> 
4.getElementById方法
getElementByld方法：可以獲取到節點樹上任意節點，需要給標簽添加id屬性，通過id選擇器獲取，
<body>
<div id = 'box'>我和我的祖國一刻也不能分割</div>
</body>
</html>
<script type="text/javascript">
console.log(document.getElementById('box'));
</script>
5. 操作節點屬性
可以通過DOM方法獲取節點樹上的任意節點(標簽)，經常通過點語法來操作節點的屬性、文本、樣式等，
<body>
<div id = 'box' class = 'cur'>我是祖國的花朵</div>
</body>
</html>
<script type="text/javascript">
var div = document.getElementById('box');
//獲取節點屬性值
console.log(div.id);
console.log(div.className);//注意這里必須用className不能用class
//修改節點的屬性值
div.id = 'la'
div.className = 'lala'
</script>6.操作節點文本
通過DOM物件提供的方法獲取對應的節點，也可以用過點語法操作節點文本， 操作節點文本分兩種情況：
①操作表單元素()文本，需要通過value屬性進行操作，
<body>
<input type="text" id="box" value="這是通過value設定的默認文本">
</body>
</html>
<script type="text/javascript">
var input = document.getElementById('box');
console.log(input.value);
input.value = '設定新文本';
console.log(input.value);
</script>②操作非表單元素文本，通過innerHTML屬性進行操作，
<body>
<p id='abc'>學習使我快樂</p>
</body>
</html>
<script type="text/javascript">
var p = document.getElementById('abc');
console.log(p.innerHTML);//獲取文本
p.innerHTML = '我愛學習';//修改文本
console.log(p.innerHTML);
</script>7.操作節點樣式
(1)樣式的三種寫法：
①行內樣式
<div style="width: 100px;height: 100px;color:red">嘿嘿嘿</div>②內部樣
<style>
.abc{
color:red;
border:1px;
width: 200px;
height: 200px;
background-color: aqua;
}
</style>③外部樣式：直接寫在.css檔案中寫入樣式，并通過<link>標簽引入，
(2)操作樣式
帶有-的樣式如background-color全部變為駝峰寫法，
<script type="text/javascript">
var p = document.getElementById('abc');
//獲取行內樣式
console.log(p.style);
console.log(p.style.width);
console.log(p.style.backgroundColor);//注意寫法
//設定行內樣式
p.style.width = '200px';
console.log(p.style.width);
</script>8.事件系結
①概述：在網站中，用戶滑鼠移上某個元素、單機某個元素時，元素可以對用戶的行為進行回應，在JS中只有標簽才能系結事件，
語法格式：element.onxxx = function(){}
右側部分是一個函式(事件處理函式)：當用戶觸發事件時才會執行一次，
②通過onclick或ondblclicd系結單機或雙擊事件
<script type="text/javascript">
//系結單機事件
var div = document.getElementById('box');
div.onclick = function(){
//點擊后修改背景顏色
div.style.backgroundColor = 'red';
}
</script>9.信號量思想
下例中，每點擊文字一次，字數就會變大一號，
<script type="text/javascript">
//系結單機事件
var p = document.getElementById('box');
var fs = 12;//默認字號是12
p.onclick = function(){
fs++;
//修改字體大小
p.style.fontSize = fs + 'px';//這里+為連字符，拼成字串
}
</script>10.onmouseenter/onmouseleave鼠標移上/移除事件
下例實作的功能為：將滑鼠放到圖1上，圖1就變為圖2；移開滑鼠，又變回圖1，
<body>
<img src="./JS封面.jpg" id="box">
</body>
</html>
<script type="text/javascript">
var img = document.getElementById('box');
//系結滑鼠移上事件
img.onmouseenter = function(){
//修改圖片地址
img.src = "./Mao.jpg";
};
//系結滑鼠移除事件
img.onmouseleave = function () {
img.src = "./JS封面.jpg";
};
</script>11.onfocus/onblur聚焦與失焦事件
聚焦：點擊輸入框，有游標閃爍，失焦：點擊空白處，游標不再閃爍，
<body>
<p>
請輸入手機號：<input type="text" id="cur">
<span id="phone"></span>
</p>
</body>
</html>
<script type="text/javascript">
var input = document.getElementById('cur');
var span = document.getElementById('phone');
//聚焦事件
input.onfocus = function(){
//文本框文字顏色變為綠色
input.style.color = "green";
};
//失焦事件
input.onblur = function(){
//獲取文本框內文本
var txt = input.value;
if(/^1[3456789]\d{9}/.test(txt)){
span.innerHTML = "是手機號格式";
}else{
span.innerHTML = "不是手機號格式";
}
}
</script>12.滑鼠系列事件
在DOM中可以給任意節點系結滑鼠系列事件，常用的有以下幾種：
①onmousedown：滑鼠按下事件，類似于單機事件，
②onmousemove：滑鼠移動事件
③onmouseup：滑鼠抬起事件
<script type="text/javascript">
//滑鼠按下
document.onmousedown = function () {
//滑鼠按下后使背景顏色變紅
document.body.style.background = "red";
}
//滑鼠移動
document.onmousemove = function () {
//使背景顏色變為隨機的顏色
var R = parseInt(Math.random()*255);
var G = parseInt(Math.random()*255);
var B = parseInt(Math.random()*255);
document.body.style.background = "rgb("+R+","+G+","+B+")";
}
//滑鼠抬起
document.onmouseup = function(){
document.body.style.background = "white";
}
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/349650.html
標籤：其他