第九天

03-對象模型-第03天{節(jié)點操作、控制樣式}

• 第九天
  • 節(jié)點屬性
  • 節(jié)點操作
    • 獲取子節(jié)點&子元素
    • 獲取下一個兄弟節(jié)點
    • 獲取下一個兄弟元素
      • 獲取下一個兄弟元素兼容寫法
      • 獲取上一個兄弟元素兼容寫法
    • 父節(jié)點
  • 控制樣式
    • 獲取樣式
    • 設(shè)置樣式
      • 通過style設(shè)置樣式
      • 通過類名設(shè)置樣式

節(jié)點屬性

<node>.nodeType
    元素(標簽): 1, 
    屬性: 2, 
    文本: 3
<node>.nodeName
    元素(標簽): 大寫的標簽名, 
    屬性: 屬性名
    文本: #text
<node>.nodeValue
    元素(標簽): null
    屬性: 屬性賦值等號后面的值
    文本: 文本字符串

節(jié)點操作

獲取子節(jié)點&子元素

• childNodes: 獲取指定元素的子節(jié)點,包括文本節(jié)點、元素節(jié)點等

• children: 獲取知道元素的子元素,只會獲取元素節(jié)點。

  <ul id="list">
      <li><a href="javascript:void(0)">首頁</a></li>
      <li><a href="javascript:void(0)">播客</a></li>
      <li><a href="javascript:void(0)">博客</a></li>
      <li><a href="javascript:void(0)">相冊</a></li>
      <li><a href="javascript:void(0)">關(guān)于</a></li>
      <li><a href="javascript:void(0)">幫助</a></li>
  </ul>
  
  var ul = document.getElementById("list");
  var lis = ul.getElementsByTagName("li");
  //不關(guān)心層級 只找指定標簽
  //缺點： 如果內(nèi)部還有l(wèi)i 也會找到
  var nodes = ul.childNodes;
  //子節(jié)點 只找子級
  //缺點： 除了我們想要的元素節(jié)點 還會獲取到其他節(jié)點
  var children = ul.children;//子元素
  
  

childNodes是DOM標準中規(guī)定的方法 獲取節(jié)點的方式所有瀏覽器都支持
children不是DOM標準中規(guī)定的方法 因為很常用所有瀏覽器也都支持

獲取下一個兄弟節(jié)點

• nextSibling:下一個兄弟節(jié)點

  <input type="text" id="txtName">
  <span></span>
  <input type="text" id="txtPwd"><span></span>
  <input type="button" id="btn" value="注冊">
  
  var txt = document.getElementById("txtName");
  var next = txt.nextSibling;// 獲取到的是換行,空文本節(jié)點
  
  var pwd = document.getElementById("txtPwd");
  var next = pwd.nextSibling;// 獲取到的是span元素,因為兩個標簽間沒有其他節(jié)點
  
  

獲取下一個兄弟元素

• nextElementSibling: 下一個兄弟元素

  <input type="text" id="txtName">
  <span></span>
  
  var txt = document.getElementById("txtName");
  var next = txt.nextElementSibling;// 可以獲取到span元素,只獲取下一個兄弟元素,忽略非元素類型的節(jié)點
  
  

獲取下一個兄弟元素兼容寫法

// 獲取下一個兄弟元素
function getNextElement(element){
    if(element.nextElementSibling){
        //能找到nextElementSibling這個屬性 就可以直接使用
        return element.nextElementSibling;
    }else{
        var next = element.nextSibling;// 獲取下一個兄弟節(jié)點
        // 如果next就是想要的下一個兄弟元素 就直接返回 如果不是 就一直找
        while(next&&next.nodeType !==1){//next找到了而且不是想要的元素節(jié)點就繼續(xù)找
            next = next.nextSibling;
        }
        return next;
    }
}

獲取上一個兄弟元素兼容寫法

// 獲取上一個兄弟元素
function getPreviousElement(element){
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var previous = element.previousSibling;
        while(previous&&previous.nodeType !== 1){
            previous = element.previousSibling;
        }
        return previous;
    }
}

父節(jié)點

• parentNode: 獲取元素的父節(jié)點,父節(jié)點肯定是一個元素

  <div id = "box">
      ![](1.jpg)
  </div>
  
  var img = document.getElementById("img");
  var parent = img.parentNode; //獲取到的就是id為box的div元素
  
  

控制樣式

div{
    width:100px;
    height:100px;
    background-color:red;
}
<div id="box"></div>

var box = document.getElementById("box");
consloe.log(box.style.width);// 打印的是空字符串

box.style.width = "300px";// 設(shè)置的是行內(nèi)樣式,而且這里必須帶單位
console.log(box.style.width);// 打印的是“300px“

獲取樣式

• 通過style只能獲取行內(nèi)樣式
• 獲取的樣式如果有單位,獲取到的樣式中也會帶單位,類型是一個字符串

設(shè)置樣式

通過style設(shè)置樣式

• 通過style設(shè)置的是行內(nèi)樣式
• 如果樣式需要單位,設(shè)置時也需要把單位帶上

通過類名設(shè)置樣式

.b{
    width:100px;
    height:100px;
    background-color:red;
}
<div id="box"></div>

var box = document.getElementById("box");
// 通過類名設(shè)置樣式 兩種方式
box.className = "b";
box.setAttribute("class","b");