目錄
一、dom提供的方法
- 獲取元素的方法：
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
- 創建元素
var ele = document.createElement("標籤名")
- 添加元素
dom.appendChild(ele)
eg: ele = document.createElement("span") || document.createTextNode("aaa")
var dom = document.getElementsByTagName("div")[0]
- 刪除元素
dom.removeChild(ele )
eg: ele = document.getElementsByTagName("li")[0]
二、dom提供的屬性
- 設置標籤的文本內容
innerHTML
innerText
- 獲取父元素
dom.parentElemrnts
- 獲取子元素
dom.children
- 獲取當前元素的上一個元素
dom.previousElementSibling
- 獲取當前元素的下一個元素
dom.nextElementSibling
- 子節點
dom.childNodes
- 節點類型
nodeType == 1 : 標籤節點
nodeType == 2 : 屬性節點
nodeType == 3 : 文本節點
- 設置類名
dom.className = "classname"
三、dom提供的類名操作方法
- classList
- dom.classList.add("classname") //添加類名
- dom.classList.remove("classname") //移除類名
- dom.classList.toggle("classname") //如果不存在類名就添加,存在就刪除
- dom.classList.contains("classname") //屬性包含類名否,返回布爾值
四、獲取元素的css屬性值
- dom.style.屬性 = 屬性值
- dom.currentStyle['屬性'] 獲取屬性值(IE的getComputedStyle)
- getComputedStyle(dom，僞類(或null))["屬性"]
調用者: window
參數:a.元素 b.僞類,不是僞類就傳null
返回值:對象
功能: 獲取元素的css屬性(只讀不寫,區別於[dom.style.屬性名 = 屬性值],只寫不讀)
學習api的四個要點
調用者
參數
返回值
功能
五、操作元素的標籤屬性的方式
- getAttribute("標籤的屬性") 獲取標籤屬性的屬性值
- setAttribute("屬性","屬性值") 設置標籤屬性的屬性值
- removeAttribute("屬性") 刪除標籤屬性的屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>標籤屬性的操作</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
}
#boxId {
background-color:red;
}
</style>
</head>
<body>
<div class="box" id="boxId"></div>
<img src="./img/timg.jpg" alt="">
<script>
// 1.0 獲取元素
var ele = document.getElementsByTagName("div")[0]
var img = document.getElementsByTagName("img")[0]
// getAttribute()
// 調用者： dom
// 參數：屬性名
// 返回值：屬性值
// 功能：獲取標籤指定的屬性值
// 2.0 獲取標籤屬性的值
var cName = ele.getAttribute("class")
console.log(cName)
console.log("===========================================")
// 設置標籤的屬性值
// setAttribute()
// 調用者： dom
// 參數：屬性名,屬性值
// 返回值：忽略
// 功能：設置標籤指定的屬性值
// 2.0 獲取標籤屬性的值
// 3.0 設置img的路徑
img.setAttribute("src","./img/second.png")
console.log("===========================================")
// 4.0 移除標籤的屬性
// removeAttribute()
// 調用者： dom
// 參數：屬性名
// 返回值：忽略
// 功能：移除標籤指定的屬性值
ele.removeAttribute("id")
console.log("===========================================")
</script>
</body>
</html>
六、offset, scroll, client 三大家族
- offset屬性
- offsetWidth = width + paddig + border
- offsetHeight = height+ paddig + border
- offsetTop
- offsetLeft
// 定位 區別父元素是否加了定位屬性
// 如果加了定位屬性(relative,absolute,fixed),box.offsetTop和box.offsetLeft相對父元素的邊框的距離
// 如果沒有加定位屬性, box 相對瀏覽器邊框的距離
<script>
//獲取相關元素,
var box = document.getElementsByClassName("box")[0]; //只讀不寫
//offset屬性
//offsetWidth = width + paddig + border
//offsetHeight
var w = box.offsetWidth;
var h = box.offsetHeight;
console.log({
width:w,
height:h
})
// 定位 區別父元素是否加了定位屬性
// 如果加了定位屬性(relative,absolute,fixed),box.offsetTop和box.offsetLeft相對父元素的邊框的距離
// 如果沒有加定位屬性, box 相對瀏覽器邊框的距離
var ttop = box.offsetTop;
var left = box.offsetLeft;
console.log({
top:ttop,
left:left
})
</script>
- scroll屬性
- scrollHeight = height + padding(不含邊框)
//box.scrollHeight 獲取的高度 如果文本內容過多超出盒子的時候，盒子高度 = padding-top + height + 文本內容
- scrollWidth: width + padding(不含邊框)
- scrollTop：獲取頁面超出瀏覽器頂部的距離
- scrollLeft：獲取頁面超出瀏覽器左邊的距離
<script>
var box = document.getElementsByClassName("box")[0]
//2.0獲取標籤的尺寸
//標籤高度: height + padding
//標籤寬度: width + padding
console.log(box.scrollWidth)
console.log(box.scrollHeight)
//3.0 scrollTop/scrollLeft
//根元素引用 scrollTop屬性
var ttop = document.documentElement.scrollTop; //html
//獲取頁面超出瀏覽器頂部的距離
console.log({scrollTop:ttop,type:"有聲明文檔類型t"})
// <!DOCTYPE html> 有編寫這一行代碼 dtd
var ttop2 = document.body.scrollTop; //body
console.log({scrollTop2:ttop2,type:"沒有聲明文檔類型t"})
//scrollLeft
var left = document.documentElement.scrollLeft;
console.log({scrollLeft:left,type:"有聲明文檔類型l"})
var left2 = document.body.scrollLeft; //body
console.log({scrollLeft2:left2,type:"沒有聲明文檔類型l"})
//兼容寫法
var ttop_all = document.documentElement.scrollTop || document.body.scrollTop;
var left_all = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log({scrollLeft:left_all,scrollTop:ttop_all})
</script>
- client屬性
- clientWidth = padding + width (不含邊框)
- clientHeight = padding + height (不含邊框)
- clientLeft = border-left //獲取邊框的大小
- clientTop = border-top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>client</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #ccc;
border-left: 20px solid #000;
border-right: 20px solid #000;
border-top: 20px solid rebeccapurple;
border-bottom: 20px solid rebeccapurple;
padding: 20px;
}
.box2{
margin-top: 100px;
width: 100px;
height: 100px;
background-color: skyblue;
border: 15px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
</div>
<div class="box2">
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
hellow<br>
</div>
<!-- scrollHeight -->
<script>
//獲取元素box
var box = document.getElementsByClassName("box")[0]
//box.scrollHeight 獲取的高度 如果文本內容過多的時候
//盒子高度 = pt + height + 文本內容
console.log(box.scrollHeight)
console.log("======d========================")
var box2 = document.getElementsByClassName("box2")[0]
//client屬性
//clientWidth = padding + width (不含邊框)
//clientHeight = padding + height (不含邊框)
console.log(box2.clientWidth)
console.log(box2.clientHeight)
//獲取邊框的大小
//clientLeft = border-left
//clientTop = border-top
console.log(box2.clientLeft)
console.log(box2.clientTop)
</script>
</body>
</html>