节点
- 什么是节点
你好
是文本节点<div>
元素节点class id value
是属性节点<!--<div>注释结点</div>-->
注释节点
获取节点
ele.childNodes
获取元素节点+ 文本节点 但是只获取子代不能获取孙子代
<div id="wrap">
<div class="position">
<div id="box">
你好
<span>22</span>
<p>333</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
<script>
var oBox =document.getElementById("box");
console.dir(oBox);
</script>
结果childNodes:NodeList(7) 有七个 其中text有的代表是空格
ele.child
只获取元素节点 但是只获取子代不能获取孙子代
console.dir(oBox.children);
HTMLCollection(3)0: span1: p2: ullength: 3__proto__: HTMLCollection
firstChild
只获取第一个节点 包括文本节点(空格)和注释节点空格
console.dir(oBox.firstChild);
结果#text
firstElementChild
获取第一个元素节点
console.dir(oBox.firstElementChild);
结果是span
lastChild
只获取最后一个节点
console.dir(oBox.lastChild);
结果#text
lastElementChild
获取最后一个元素节点
console.dir(oBox.lastElementChild);
结果ul
获取兄弟节点
nextSibling
获取到的是下一个兄弟节点 不换行就是空格
var oSpan =document.getElementsByTagName("span")[0];
console.dir(oSpan.nextSibling);
结果#text
- nextElementSibling获取兄弟元素节点
console.dir(oSpan.nextElementSibling);
结果是p
console.dir(oSpan.nextElementSibling.nextElementSibling);
结果是ul 可以组合使用
3.previousSibling 获取上一个兄弟节点 包括文本和注释节点
console.dir(oSpan.previousSibling);
结果#text
- previousElementSibling获取上一个兄弟元素节点
console.dir(oSpan.previousElementSibling);
结果返回null
获取父节点
- parentNode 获取父节点
console.dir(oSpan.parentNode);
结果是div#box 2.获取父节点的兄弟节点
<div id="wrap">
<div class="position">
<div id="box">你好
<span>22</span>
<p>333</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="main"></div>
</div>
</div>
var oSpan =document.getElementsByTagName("span")[0];
console.dir(oSpan.parentElement.nextElementSibling);
结果div#main
- 获取定位父级节点offsetParent) 如果父级没有定位或者自己没有定位找的是body
#wrap{
position: relative;
}
#box{
position: absolute;
}
var oBox =document.getElementById("box");
console.dir(oBox.offsetParent);
结果是div#wrap
获取子元素的数量
1.childElementCount获取子元素的个数 孙元素不算
console.log(oBox.childElementCount);
结果为3
删除节点
- removeChild(节点属性) 只能从父级开始删除 不能自己删除自己
创建节点
- createElement 创建元素节点 创建完节点可以直接进行dom操作
- appendChild 添加节点 只能从父级节点开始添加 在最后添加节点
<body>
<div id="wrap">
<div class="position">
<div id="box">你好
<span>22</span>
<p>333</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="main"></div>
</div>
</div>
</div>
</body>
<script>
var oBox =document.getElementById("box");
var oP =document.createElement("p");
oP.innerHTML ="我是一个p";
oP.onclick = function(){
alert(1);
}
oBox.appendChild(oP)
</script>
- 创建文本节点 createTextNode
var text = document.createTextNode("我很好");
oBox.appendChild(text);
与oBox.innerHTML +="我很好";效果一样但是这样做 之前绑定的事件会失效
- 替换节点replaceChild 前面(第一个)是新的元素,后面是旧节点
var oBox =document.getElementById("box");
var oSpan =document.getElementsByTagName("span")[0];
var oSpan2 =document.createElement("span");
oSpan2.innerHTML ="我是新的";
oBox.replaceChild(oSpan2,oSpan);
这样22就替换成我是新的
- 添加节点但是不替换insertBefore 第一个是插入的新元素,后面是那个节点(前添加节点)
var oBox =document.getElementById("box");
var oSpan =document.getElementsByTagName("span")[0];
var oSpan2 =document.createElement("span");
oSpan2.innerHTML ="我是新的";
oBox.insertBefore(oSpan2,oSpan);
在22前面我是新的
- 克隆节点 cloneNode() 克隆只克隆元素本身还有元素节点,不会克隆事件 括号里可以接受一个布尔类型,true就是克隆子孙元素
<body>
<div id="wrap">
<div class="box">nnn</div>
</div>
</body>
<script>
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick =function () {
alert(1);
}
var oBox2 =oBox.cloneNode();
oBox2.innerHTML ="我是克隆";
wrap.appendChild(oBox2)
结果只有点击nn才会有弹窗,点击“我是克隆”没有弹窗
<body>
<div id="wrap">
<div class="box">nnn
<h2>子孙</h2>
</div>
</div>
</body>
<script>
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick =function () {
alert(1);
}
var oBox2 =oBox.cloneNode(true);
wrap.appendChild(oBox2)
结果是nnn 子孙 nnn 子孙 内容复制
清除空隙
- 浮动或变块
- 父级字体font-size为0
- 加注释
- 删除子代文本节点
<style>
p{
display: inline-block;
width: 100px;
height: 100px;
background-color: #ff6666;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
</body>
var oDiv =document.getElementsByTagName("body")[0];
for (var i=0;i<oDiv.childNodes.length;;i++){
if (oDiv.childNodes[i].nodeName==="#text"){
oDiv.removeChild(oDiv.childNodes[i]);//长度会变childNodes.length;
}
}
这样就删除空格
节点属性
- getAttribute(节点名称) 返回的是值
<body>
<div class="box"></div>
</body>
<script>
var oBox =document.getElementsByClassName("box")[0];
console.log(oBox.getAttribute("class"))
结果是box
- 返回节点对象getAttributeNode
var oBox =document.getElementsByClassName("box")[0];
console.dir(oBox.getAttributeNode("class"))
- 设置节点属性setAttribute setAttributeNode
oBox.setAttribute("name","hu");
就会添加节点名称
var oBox =document.getElementsByClassName("box")[0];
var attr =document.createAttribute("index");//创建节点对象
attr.value =1;//赋值
oBox.setAttributeNode(attr);
就会添加节点属性index=1
var oBox =document.getElementsByClassName("box")[0];
var attr =document.createAttribute("index");
attr.value =1;
oBox.setAttributeNode(attr);
console.log(oBox.nodeName);
结果是div
var oBox =document.getElementsByClassName("box")[0];
var attr =document.createAttribute("index");
attr.value =1;
oBox.setAttributeNode(attr);
console.log(attr.nodeName);
结果是index
var oBox =document.getElementsByClassName("box")[0];
var attr =document.createAttribute("index");
attr.value =1;
oBox.setAttributeNode(attr);
console.log(attr.tagName);
结果是undefined 因为tagname是元素节点才有 nodename是所有节点都有
节点类型 nodeType
3 #text 文本节点
8 #comment 注释节点
1 元素节点(span ul p )
9 文档节点
- 删除节点属性removeAttribute
var oBox =document.getElementsByClassName("box")[0];
oBox.setAttribute("name","hu");
oBox.removeAttribute("name");
小练习 通过节点是唯一的写点击添加菜单
<style>
div{
float: left;
width: 200px;
min-height: 400px;
padding: 10px;
margin: 20px;
border: 1px solid #000;
text-align: center;
}
div h2{
border-bottom: 1px solid #000;
}
div span{
display: block;
height: 30px;
background-color: #000;
font-size: 16px;
color: #fff;
line-height: 30px;
cursor: pointer;
}
div span +span{
margin-top: 10px;
}
div span:hover{
opacity: .5;
}
</style>
</head>
<body>
<div id="menue">
<h2>菜单</h2>
<span>西红柿炒鸡蛋</span>
<span>爆炒牛肉</span>
<span>土豆丝</span>
<span>肉末豆腐</span>
<span>鱼香肉丝</span>
<span>水煮肉片</span>
</div>
<div id="select">
<h2>已点</h2>
</div>
</body>
<script>
var oMenu =document.getElementById("menue"),
oSelect =document.getElementById("select"),
oSpan =document.getElementsByTagName("span");
for (var i=0;i<oSpan.length;i++){
oSpan[i].onclick =function () {
this.selectStatu =!this.selectStatu;//取反,一开始没有定义是undefined,取反之后变为真
if (this.selectStatu){
oSelect.appendChild(this);
} else{
oMenu.append(this);
}
}
}
</script>
通过注释节点 添加图片
<body>
<div id="hidden">
<!--
<div class="pic">
<img src ="1.jpg">
</div>
-->
</div>
<div id="box"></div>
</body>
<script>
document.onclick =function () {
box.innerHTML =hidden.childNodes[1].nodeValue;
}