侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 297 篇文章
  • 累计创建 134 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

原生js使用 nextSibling 实现可输入下拉框

孔子说JAVA
2022-05-20 / 0 评论 / 0 点赞 / 237 阅读 / 4,736 字 / 正在检测是否收录...

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>

运行结果如下:

image-1652924512550

通过上图,我们可以分析下代码:

  • 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节点有:

  1. 元素节点:<html><body><p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 属性节点:元素属性,如<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”; 
0

评论区