1. getElement系列訪問
通過DOM獲取頁面的元素的三種方式
Ø getElementById( )方法訪問DOM元素 —》 id獲取一個元素
Ø getElementsByName( )方法訪問DOM元素—》 元素的name屬性名獲取(數組)
Ø getElementsByTagName( )方法訪問DOM元素 –》元素的名稱獲取(數組)
Ø getElementsByClassName()方法訪問DOM元素 –》類樣式名稱獲取(數組)
案例演示
<script>
//onload事件 會等body的內容加載完後再執行 load()函數
function load(){
//根據id獲取
var bookname=document.getElementById("book").innerHTML;
alert(bookname);
//根據name屬性獲取--》(數組)
var seasons= document.getElementsByName("season");
//創建變量
var ss="";
for(var i=0;i<seasons.length;i++){
ss+=seasons[i].value;
}
document.getElementById("content").innerHTML=ss;
//根據標籤名獲取
var contentes="";
var inputs= document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
contentes+=inputs[i].value;
}
// document.getElementById("cc").innerHTML="<h1>"+contentes+"</h1>";
document.getElementById("cc").innerText="<h1>"+contentes+"</h1>"
}
</script>
</head>
<body οnlοad="load();">
<div class="content">
<img src="images/book.jpg" alt="島上書店"/>
<div class="r">
<div id="book">書名：島上書店</div>
<input name="changeBook" value="換換名稱" type="button" οnclick="alterBook();" /><br>
四季名稱：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input內容" οnclick= "all_input()" />
<input name="b3" type="button" value="四季名稱" οnclick="s_input()" />
<input name="b4" type="button" value="清空頁面內容" οnclick="clearAll()" />
<p id="replace"></p>
</div>
</div>
<div id="content"></div>
<div id="cc"></div>
</body> |
2. 操作節點的屬性
Ø getAttribute("屬性名")
Ø setAttribute("屬性名","屬性值")
<script>
function showUrl(){
//1找到該圖片
var img=document.getElementById("img");
var url=img.getAttribute("src");
alert(url);
}
function changeUrl(){
//1找到該圖片
var img=document.getElementById("img");
//更改src屬性的值
img.setAttribute("src","images/1.png");
}
</script>
<body>
<button οnclick="showUrl();">查看圖片的路徑</button>
<button οnclick="changeUrl();">更換圖片</button>
<img id="img" src="images/book.jpg" alt="我是一本書" >
</body> |
3. 操作節點樣式
Ø style屬性
Ø className屬性
HTML元素.style.樣式屬性＝"值"
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cartList").style.display="none";
HTML元素.className="樣式名稱"
document.getElementById("cart").className="cartOver";
<style type="text/css">
.li {
background-color: red;
font-size: 45px;
}
</style>
</head>
<body>
<ul>
<li id="zhu">朱茵</li>
<li>馬小玲</li>
<li id="zz">珍珍</li>
<li >高圓圓</li>
</ul>
</body>
</html>
<script>
var love = document.getElementById("zhu");
love.style.backgroundColor = "yellow";
var zz=document.getElementById("zz");
zz.className="li";
</script> |
