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”;
评论区