HTML中的每个标签元素、属性、文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构，类似于一颗家族树一样，一层接一层，这就是Html的DOM树。而JavaScript为了能够操作Html，定义了一套自己的dom编程接口，通过这些接口可以操作html的每个DOM节点。本教程我们使用nextSibling属性实现可编辑的下拉框。
1、nextSibling的用法
对于nextSibling属性，在W3school中的定义为：nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
- 注意：如果元素节点紧跟后面没有同级节点则返回：null。
- 注意：空白元素被看作是文本，文本也是节点。如果上一个节点与所返回节点之间有空格将返回：undefined。
看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nextSibling用法</title>
<script>
function next(){
var x=document.getElementById("demo1");
x.value = getIdByNextSibling("item1");
var y=document.getElementById("demo2");
y.value=getIdByNextSibling("item2");
var z=document.getElementById("demo3");
z.value=getIdByNextSibling("item3");
}
// 获取兄弟节点的id属性
function getIdByNextSibling(id){
var next = document.getElementById(id).nextSibling;
if(next == null){
return "null";
} else {
return next.id;
}
}
</script>
</head>
<body>
<p>nextSibling示例列表:</p>
<ul id="myList">
<li id="item1">Coffee</li><li id="item2">Tea</li>
<li id="item3">juice</li></ul>
<p><span>Coffee节点下一个兄弟节点的属性id </span><input type="text" id="demo1" value=""></p>
<p><span>Tea节点下一个兄弟节点的属性id </span><input type="text" id="demo2" value=""></p>
<p><span>juice节点下一个兄弟节点的属性id </span><input type="text" id="demo3" value=""></p>
<button id="button" onclick="next()">点我获取下一个元素的id属性</button>
</body>
</html>
运行结果如下：
通过上图，我们可以分析下代码：
- Coffee节点的下一个兄弟节点为
<li id="item2">Tea</li>, 从代码中可以看到，它和第一个<li id="item1">Coffee</li>之间没有任何空格，所以第一个文本框的输出结果是item2。 - Tea节点和
<li id="item3">juice</li>之间存在换行符，换行符和空格都是空白元素，被看作是文本，而文本也是节点，这个文本节点没有id属性，所以返回：undefined。 - juice节点之后已经没有和它同级的兄弟节点了，所以返回：
null。如果在<li id="item3">juice</li>和</ul>之间增加一个空格或换行，这里将会返回：undefined。
注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined
2、使用 nextSibling 实现可编辑下拉框
使用nextSibling 实现可输入下拉框，具体代码如下：
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=utf8'>
<TITLE>js实现可输入的下拉框</TITLE>
</HEAD>
<BODY>
<div style="position:relative;">
<span style="margin-left:130px;width:18px;overflow:hidden;">
<select style="width:148px;margin-left:-130px;height:25px;" onchange="this.parentNode.nextSibling.value=this.value">
<option value="咖啡">Coffee</option>
<option value="茶">Tea</option>
<option value="果汁">Juice</option>
</select></span><input name="box" style="width:130px;position:absolute;left:0px;height:25px;">
</div>
</BODY>
</HTML>
分析代码可知：实现原理是将下拉框的值动态赋值给它的下一个兄弟节点input文本框，而文本框是可以编辑的，再通过样式将文本框与下拉框的位置重叠，这样就实现了可编辑的下拉框。
- 注意：代码中先根据
parentNode获取了下拉框的父节点span，再获取父节点的下一个兄弟节点。 - 下拉框的父节点
span的结束标签</span>和<input name="box"...标签必须在同一行，中间不能有空白字符（空格和回车）。
3、JavaScript DOM操作的常用方法和属性
HTML文档是由节点构成的集合，DOM节点有:
- 元素节点：
<html>、<body>、<p>等都是元素节点，即标签。 - 文本节点:向用户展示的内容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。 - 属性节点:元素属性，如
<a>标签的链接属性href。
3.1 常用方法
获取节点
//通过id号来获取元素，返回一个元素对象
document.getElementById(idName);
//通过name属性获取id号，返回元素对象数组
document.getElementsByName(name);
//通过class来获取元素，返回元素对象数组（ie8以上才有）
document.getElementsByClassName(className);
//通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName) ;
获取/设置元素的属性值
//括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName);
//传入属性名及设置的值
element.setAttribute(attributeName,attributeValue);
创建节点Node
//创建一个html元素，这里以创建h3元素为例
document.createElement("h3");
//创建一个文本节点；
document.createTextNode(String);
//创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");
增添节点
//往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);
//在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);
删除节点
//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
element.removeChild(Node);
3.2 常用属性
获取当前元素的父节点
//返回当前元素的父节点对象
element.parentNode
获取当前元素的子节点
//返回当前元素所有子元素节点对象，只返回HTML节点
element.chlidren
//返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.chilidNodes
//返回当前元素的第一个子节点对象
element.firstChild
//返回当前元素的最后一个子节点对象
element.lastChild
获取当前元素的同级元素
//返回当前元素的下一个同级元素 没有就返回null
element.nextSibling
//返回当前元素上一个同级元素 没有就返回null
element.previousSibling
获取当前元素的文本
//返回元素的所有文本，包括html代码
element.innerHTML
//返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText
获取当前节点的节点类型
//返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType
设置样式
//设置元素的样式时使用style，这里以设置文字颜色为例。
element.style.color=“#eea”;
评论区