如何獲取一個元素
如何訪問一個元素的樣式
如何設置和刪除屬性
1、掌握基本的DOM查找方法
doucument.getElementById()
doucument.getElementByTagName()
語法:
doucument.getElementById("id")
doucument.getElementByTagName("tag")
功能:
返回對擁有指定ID的第一個對象的引用。
返回一個對所有tag標籤引用的集合。
返回值:
DOM對象。
數組。
說明:
id爲DOM元素上id屬性的值。
tag爲要獲取的標籤名稱。
//doucument.getElementById()
<div class="box" id="box">
元素
</div>
<script>
//獲取id爲box的這個元素
var box=document.getElementById("box");
console.log(box);
//下面三行是結果
//<div class="box" id="box">
// 元素
// </div>
</script>
<!--ul#list1>li*3 快捷方式是啥-->
<ul id="list1">
<li>前端開發</li>
<li>服務器端開發</li>
<li>UI設計</li>
</ul>
<ol>
<li>JavaScript原生</li>
<li>JavaScript框架</li>
</ol>
<script>
//獲取頁面中所有的li
var lis=document.getElementsByTagName("li");
console.log(lis.length);//5
//獲取id爲list1下的所有li
var lis2=document.getElementById("list1").getElementsByTagName("li");
console.log(lis2.length);//3
</script>
2、掌握如何設置DOM元素的樣式
語法:
ele.style.styleName=styleValue
功能:
設置ele元素的CSS樣式。
說明:
①ele爲要設置樣式的DOM對象
②styleName爲要設置的樣式名稱
不能使用“-”連字符形式font-size 使用駝峯命名形式fontSize
③styleValue未設置的樣式值
掌握innerHTML屬性的應用
-獲取和設置標籤之間的文本和html內容
語法:
ele.innerHTML
功能:
設置ele元素開始和結束標籤之間的HTML。
語法:
ele.innerHTML=“html”
功能:
設置ele元素開始和結束標籤之間的HTML內容爲html。
掌握className屬性的應用
動態添加class替換元素本身的class
ele.className是重新設置類,替換元素本身的class
如果元素有2個以上的class屬性值,那麼獲取這個元素的className屬性時,
會將它的class屬性值都打印出來
語法:
ele.className
功能:
返回ele元素的class屬性。
語法:
ele.className=“cls”
功能:
設置ele元素的class屬性爲cls
掌握如何在DOM元素上添加刪除獲取屬性
語法:
ele.getAttribute("attribute")
功能:
獲取ele元素的attribute屬性。
說明:
①ele是要操作的DOM對象
②attribute是要獲取的HTML屬性(如:id,type)
無法獲取class屬性