DOM-檔案物件模型
1. 四種節點的屬性：
2. var btu=document.getElementById('btu'); //獲取button物件的ID
btu.innerHTML="I'm a buttom"; //修改HTML內的文字
3. 事件：用戶和瀏覽器之間的互動行為，比如，點擊按鈕，滑鼠移動.....
可以在事件對應的屬性中設定一些js代碼，當事件被觸發時，這些代碼會被執行，
W3c中JS>HTML DOM>DOM參考>DOM Event
var btn=document.getElementById('btu');
//為按鈕的對應事件系結處理函式的形式來回應事件，當事件被觸發時就會執行
//系結一個單擊事件
btn.onclick=function () {
alert("不用點？？？")}
4. 瀏覽器在加載一個頁面時，是按照自上而下的順序加載的，讀取到一行就運行一行，如果將script標簽寫到頁面的上面，在代碼執行時，頁面還沒有加載
將JS代碼寫到頁面的下部就是為了可以在頁面加載完畢以后再執行Js代碼
<script>
window.onload=function(){ ///利用這種方法可以寫在前面！！頁面加載完畢之后，立即執行
var btn=document.getElementById('btu');
btu.onclick=function(){
alert("不用點？？？")
}};
</script>
<body>
<button id="btu">一個小小小小按鈕</button>
</body>
5.
代碼：
如果讀取元素節點屬性，直接使用元素.屬性名
例子： 元素.id 元素.name 元素.value
注意：class屬性不能采用這種方式，可以使用 元素.className
<script>
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找#bj節點
var bj=document.getElementById("bj");
//列印bj
//通過innerHTML獲取元素內部的html代碼
alert(bj.innerHTML);};
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//查找li節點，封裝到陣列中
var lis=document.getElementsByName("li");
// alert(lis.length);
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML)}}
var btn03=document.getElementById("btn03");
btn03.onclick=function () {
//查找name=gender的所有節點
var inputs=document.getElementsByName("gender");
// alert(inputs.length);
for(var i=0;i<inputs.length;i++){
//innerHTML用于獲取元素內部的HTML代碼，但是Input沒有內部，對于單標簽沒有意義
//讀取元素的屬性
alert(inputs[i].value)}};
</script>
6. DOM查詢的剩余方法：
//獲取body標簽
var body=document.body;
//獲取html根標簽
var html=document.documentElement;
//已棄用
var all=document.all;
//根據元素的class屬性值查詢一組元素節點物件，IE9以上才支持
var box1=document.getElementsByClassName("box1")
7. JS與CSS互動
//在css中利用.box1 div
/*document.querySelector()
需要一個選擇器的字串作為引數，可以根據一個css選擇器來查詢一個元素節點物件*/
var div=document.querySelector(".box1 div");
console.log(div);
//雖然IE8中沒有getElementsByClassName( )，但可以利用querySelector( )代替
//使用querySelector( )方法總會回傳唯一個元素，如果滿足條件的元素有多個，那么它只會回傳第一個
var box=document.querySelector(".box1")
//使用querySelectorAll( )方法會回傳所有class相同的div，回傳陣列
var box2=document.querySelectorAll(".box1");
console.log(box2.length);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7225.html
標籤：JavaScript
上一篇：如何完全去除/隱藏Sharepoint 2013左側導航欄，包括Sharepoint的圖示和下面的site content
下一篇：JS實體-DOM-切換圖片