第九天

03-对象模型-第03天{节点操作、控制样式}

• 第九天
  • 节点属性
  • 节点操作
    • 获取子节点&子元素
    • 获取下一个兄弟节点
    • 获取下一个兄弟元素
      • 获取下一个兄弟元素兼容写法
      • 获取上一个兄弟元素兼容写法
    • 父节点
  • 控制样式
    • 获取样式
    • 设置样式
      • 通过style设置样式
      • 通过类名设置样式

节点属性

节点属性	元素	属性	文本
nodeType	1	2	3
nodeName	大写的标签名	属性名	#text
nodeValue	null	属性赋值等号后面的值	文本字符串

<node>.nodeType
    元素(标签): 1, 
    属性: 2, 
    文本: 3
<node>.nodeName
    元素(标签): 大写的标签名, 
    属性: 属性名
    文本: #text
<node>.nodeValue
    元素(标签): null
    属性: 属性赋值等号后面的值
    文本: 文本字符串

节点操作

获取子节点&子元素

• childNodes: 获取指定元素的子节点,包括文本节点、元素节点等

• children: 获取知道元素的子元素,只会获取元素节点。

  <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)">关于</a></li>
      <li><a href="javascript:void(0)">帮助</a></li>
  </ul>
  
  var ul = document.getElementById("list");
  var lis = ul.getElementsByTagName("li");
  //不关心层级 只找指定标签
  //缺点： 如果内部还有li 也会找到
  var nodes = ul.childNodes;
  //子节点 只找子级
  //缺点： 除了我们想要的元素节点 还会获取到其他节点
  var children = ul.children;//子元素
  
  

childNodes是DOM标准中规定的方法 获取节点的方式所有浏览器都支持
children不是DOM标准中规定的方法 因为很常用所有浏览器也都支持

获取下一个兄弟节点

• nextSibling:下一个兄弟节点

  <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;// 获取到的是换行,空文本节点
  
  var pwd = document.getElementById("txtPwd");
  var next = pwd.nextSibling;// 获取到的是span元素,因为两个标签间没有其他节点
  
  

获取下一个兄弟元素

• nextElementSibling: 下一个兄弟元素

  <input type="text" id="txtName">
  <span></span>
  
  var txt = document.getElementById("txtName");
  var next = txt.nextElementSibling;// 可以获取到span元素,只获取下一个兄弟元素,忽略非元素类型的节点
  
  

获取下一个兄弟元素兼容写法

// 获取下一个兄弟元素
function getNextElement(element){
    if(element.nextElementSibling){
        //能找到nextElementSibling这个属性 就可以直接使用
        return element.nextElementSibling;
    }else{
        var next = element.nextSibling;// 获取下一个兄弟节点
        // 如果next就是想要的下一个兄弟元素 就直接返回 如果不是 就一直找
        while(next&&next.nodeType !==1){//next找到了而且不是想要的元素节点就继续找
            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;
    }
}

父节点

• parentNode: 获取元素的父节点,父节点肯定是一个元素

  <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";// 设置的是行内样式,而且这里必须带单位
console.log(box.style.width);// 打印的是“300px“

获取样式

• 通过style只能获取行内样式
• 获取的样式如果有单位,获取到的样式中也会带单位,类型是一个字符串

设置样式

通过style设置样式

• 通过style设置的是行内样式
• 如果样式需要单位,设置时也需要把单位带上

通过类名设置样式

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

var box = document.getElementById("box");
// 通过类名设置样式 两种方式
box.className = "b";
box.setAttribute("class","b");