js获取对象的父元素,子元素,兄弟元素

今天测试我昨天写好的js插件，发现昨天考虑欠妥，导致【修改】做不了了！主要原因是我以前都是遍历表格，在每条记录后面添加修改按钮。现在用局部刷新表格的方法，每次都自动生成表格内容，以致于无法在记录后面生成按钮。

苦思冥想后，决定自动生成表格时，给表格前面添加多选框，给多选框赋值。修改时直接获取该记录的id。

结果在后来遇到了问题，需要用js获取对象的父元素,子元素,兄弟元素的值。

---

问题：需要获取当前对象（多选框）的父元素的兄弟元素（员工ID）里面的值，并且赋给当前对象（多选框）。

□	员工ID	员工姓名
□	1001	张三
□	1002	李四
□	1003	王五

起初我的代码是这样写的：

function getBoxValue(obj)
{
    var boxValue=obj.parentNode.nextSibling.nodeValue;
    obj.value=boxValue;
}

即：先获取到当前复选框的父元素节点，也就是第一个单元格。然后获取第一个单元格的下一个兄弟元素，也就是第二个单元格。最后再获取这个单元格节点的值。
结果，事与愿违，始终也获取不到员工的ID值。

---

解决方案：单元格节点的节点值本来就是null，你要获取的是单元格节点里面的文本节点的节点值。

经过很长时间的自我怀疑和否定，期间也参照了大量的网上资料。终于在否定之否定上顿悟了。单元格节点的节点值本来就是null，你要获取的是单元格节点里面的文本节点的节点值。想通这一点，就简单多了！

解决代码如下：

function getBoxValue(obj)
{
    var boxValue=obj.parentNode.nextSibling.firstChild.nodeValue;
    obj.value=boxValue;
}

即：先获取到当前复选框的父元素节点，也就是第一个单元格。其次获取第一个单元格的下一个兄弟元素，也就是第二个单元格。然后再获取这个单元格节点里面的文本节点。最后再获得这个文本节点的节点值。
再赋值给该对象，果然成功了！

---

参考资料

1.JavaScript获取父级元素,子级元素,兄弟元素的实现方法

<div id = "dom">
          <div></div>
          <div></div>
     <div></div>
 </div>

<script>
   function dom(){
      var a = document.getElementByIdx_x_x("dom");
      del_space(a);调用清理空格的函数
      var b = a.childNodes;获取a的全部子节点；
      var c = a.parentNode;获取a的父节点；
      var d = a.nextSbiling;获取a的下一个兄弟节点
      var e = a.previousSbiling;获取a的上一个兄弟节点
      var f = a.firstChild;获取a的第一个子节点
      var g = a.lastChild;获取a的最后一个子节点
}
</script>

2.jQuery获取父级元素,子级元素,兄弟元素的实现方法

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$(“span”).parent(“.class”)

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从p元素开始找,等同于$(“p span”)

3.js获取节点 dom操作

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

—我—是—分—割—线—

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

—我—是—分—割—线—

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

结束语

吾生也有涯,而知也无涯,以有涯随无涯,殆已。