节点的操作方法
<div id="box">
<p>今天下雨了</p>
<p>今天很凉快</p>
<p>风也很温柔</p>
<p>可惜下周开始升温</p>
</div>
<script>
/*
Node节点
firstChild 查找第一个子节点
lastChild 查找最后一个子节点
nextsibling 查找下一个兄弟节点
previousSibling 查找上一个兄弟节点
*/
var box = document.getElementById('box')
//获取所有的子节点childNodes W3C 长度：9 IE低版本：4
//低版本浏览器，元素中间不会添加文本节点
//alert(box.childNodes.length)
//hasChildNodes()判断是否具有子节点，返回Boolean值
console.log(box.hasChildNodes())//true
console.log(box.firstChild.nextSibling)
//兼容性写法 三元运算符 （）？条件成立时执行：条件不成立执行
console.log(box.firstChild.nodeType)
var res = (box.firstChild.nodeType ==3)?box.firstChild.nextSibling:box.firstChild
console.log(res)
console.log(box.lastChild.previousSibling)
//兼容性写法
var res = (box.lastChild.nodeType ==3)?box.lastChild.previousSibling:box.lastChild
console.log(res)
//查找父节点 parentNode
console.log(box.parentNode)
console.log(box.parentNode.parentNode)
console.log(box.parentNode.parentNode.parentNode)
</script>
子元素节点的获取
<div id="box">
<p>今天星期一</p>
<p>明天星期二</p>
<p>每天都要学习</p>
</div>
<script>
/*
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
*/
var box = document.getElementById('box')
console.log(box.firstElementChild)
console.log(box.lastElementChild)
console.log(box.firstElementChild.nextElementSibling)
console.log(box.lastElementChild.previousElementSibling)
</script>
元素节点获取
document.getElementById() 返回对象 document.getElementsByClassName() 返回数组 document.getElementsByTagName() 返回数组 document.getElementsByName() 返回数组 querySelector() 通过css选择符获取，返回对象 // querySelectorAll()
注意：
querySelector() //如果获取的有多个重名的，返回
第一个querySelectorAll()//如果获取的有多个重名的，返回
全部
元素节点操作
<div>
<p class="txt">就业形势严峻</p>
<p>不出去工作永远感受不到</p>
<p id="active">重庆重新回到高温天气</p>
<p>年轻小伙一点不精神</p>
</div>
<script type="text/javascript">
// createElement()创建元素
var input = document.createElement('input')
console.log(input)
// appendChild()追加元素节点（添加到所有子节点最后）
var div = document.getElementsByTagName('div')[0];
console.log(div)
div.appendChild(input)
// insertBefore(插入的内容，插入的位置)添加元素节点到指定的位置之前
var active = document.getElementById('active')
var input = document.createElement('input')
div.insertBefore(input,active)
// removeChild()移除指定的元素节点
var txt = document.getElementsByClassName('txt')[0];
div.removeChild(txt)
//replaceChild() 修改元素节点
var p = document.createElement('div');
p.innerHTML = '刚收到高温橙色预警短信';
console.log(p)
div.replaceChild(p,active)
</script>
克隆元素节点
<div id="box">
<p id="one">克隆技术突飞猛进</p>
</div>
<script>
var one = document.getElementById('one');
console.log(one)
// cloneNode()克隆节点 方法内不传参，则只会克隆标签和属性
// var ele = one.cloneNode()
// console.log(ele)
// cloneNode(true)克隆标签+属性+文本
var ele = one.cloneNode(true)
console.log(ele)
// 添加到页面之前，若有id属性，则需要先修改id属性的值
ele.id = 'two'
box.appendChild(ele)
</script>
属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="one" style="font-size:30px;" name="txt">据说今年将是未来最凉快的一年</div>
<script>
/*
attributes 获取所有的属性节点
createAttribute()创建属性节点
*** getAttribute(key)获取指定属性节点的值
*** setAttribute(key,value)添加或者修改属性节点
*** removeAttribute()
*/
var one = document.getElementById('one')
// 获取所有的属性节点
console.log(one.attributes)
var value = one.getAttribute('id')
console.log(value)
// setAttribute(key,value)
one.setAttribute('class','active')
one.setAttribute('name','msg')
// removeAttribute(key)移除指定的属性节点
setTimeout(function(){
one.removeAttribute('style')
},1000)
</script>
</body>
</html>
属性节点操作实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* 清除列表样式 */
ul{
list-style:none;
}
div.box{
width:600px;
height:400px;
background:#ccc;
margin: 0 auto;
}
div.box>.nav>ul>li{
width:120px;
height:50px;
background:lightblue;
/* 文本左右居中 */
text-align:center;
/* 上下居中 */
line-height:50px;
float:left;
box-sizing:border-box;
}
div.box>.nav>ul>li.active{
border-bottom:3px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li class="active">精品推荐</li>
<li>家居百货</li>
<li>数码电子</li>
<li>夏日必备</li>
<li>零食水果</li>
</ul>
</div>
<div class="content"></div>
</div>
<script>
var nav = document.getElementsByClassName('nav')[0];
var oLi = nav.getElementsByTagName('li');
console.log(oLi)
// 循环绑定事件
for(var i=0;i<oLi.length;i++){
// console.log(i)
oLi[i].onclick = function(){
// 将所有的li的class清除 removeAttribute()
for(var j=0;j<oLi.length;j++){
oLi[j].removeAttribute('class')
}
// 为当前点击的li添加样式
// console.log(oLi[i])
// this指代当前点击的对象
this.setAttribute('class','active')
}
}
</script>
</body>
</html>
\
