1：nextSibling属性
该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。
需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：
先来看一个例子：
该对象的结构表面上看，div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签，无论是生成button、checkbox、radio...等或其他表单控件，IE都会自动在后面创建一个1字节位的空白。 IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。 opera和safari对nextSibling的处理方式与FF一致 2：previousSibling属性 该属性与nextSibling属性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身，但前提必须是：该标签元素的后面必须有一个同级的元素，否则就返回null了。 3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题 一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。
1 <body> 2 <div> 3 <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" /> 4 <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" /> 5 </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var selectContents = "",//待填充的文本
_selectContent = document.getElementsByName("getSelectContent"),
i = 0,
sl = _selectContent.length;//获取元素的长度即个数
for(; i < sl ; i++){//限制复选框最多选择3项
_selectContent[i].onclick = function(){
var _t = this.nextSibling.nextSibling.innerHTML;
//var _t = this.nextSibling.nextSibling.innerHTML; console.log(this.nextSibling.nodeName);
console.log(this.nextSibling.nodeType);
if(this.checked){//如果内容被选中，则填充文本，否则删除
selectContents += "<br />" + _t;
}else{
selectContents = selectContents.replace("<br />" + _t, "")
}
document.getElementById("selectedContents").innerHTML = "被选择的内容："+selectContents;//填充html文本
}
}
};
</script>
</head>
<body>
<h2>获取复选框所有选中内容</h2>
<ul>
<li>
<input type="checkbox" name=‘getSelectContent‘>
<div class="contentCheckbox">等待选择的内容····1</div>
</li>
<li>
<input type="checkbox" name=‘getSelectContent‘>
<div class="contentCheckbox">等待选择的内容····2</div>
</li>
<li>
<input type="checkbox" name=‘getSelectContent‘>
<div class="contentCheckbox">等待选择的内容····3</div>
</li>
</ul>
<p id=‘selectedContents‘>被选择的内容：选择内容为空</p>
</body>
</html>
时间： 2024-07-30 03:24:05