第九天
03-对象模型-第03天{节点操作、控制样式}
节点属性
| 节点属性 | 元素 | 属性 | 文本 |
|---|---|---|---|
| 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">  </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");
