document.getElementsByClassName('test');

 
关于原生JS获取节点，一直是个头疼的问题，而且调用方法的名字又贼长了，所以我选择用JQ，好像跑题了--
 
话不多说看代码
 
获取父节点 及 父节点下所有子节点(兄弟节点)
 
文本一
文本二
文本三
文本四
 
function jsCopy(ev){
 
var ele=ev.parentNode;
 
//获取input的父级节点
 
console.log(ele);
 
//获取input的父级节点下的所有子节点(input及它的兄弟节点)
 
console.log(ele.childNodes);
 
//获取input的父级节点下的第一个子节点(我的目的就是获取到textarea，但是js就是这么坑)
 
console.log(ele.firstChild);
 
console.log('--------------------------分界线---------------------------------');
 
}
 
我们来运行一下
 

 
我们 看看数据
 
文本一：第一条console获取到了父级节点正常(很开心)，第二条console返回的是父级元素下的所有节点元素(你会说：what？text？尼玛没有用到text标签啊！怎么出来的)不急，我们继续看，第三条console是获取父级节点下的第一个子节点(what？这是啥？我是获取第一个textatea啊，这尼玛获取的什么？我一口老血);继续->
 
文本二：第一条console获取到了父级节点正常(很严肃)，第二条console返回的是父级元素下的所有节点元素(你会说：更上面的文本一不是一样的吗？)仔细看！是不是少了个‘text‘，我们继续看，第三条console是获取父级节点下的第一个子节点(what？获取到了，开心，郁闷了为什么啊);继续->
 
文本三：第二条console返回的是父级元素下的所有节点元素(跟文本一 差不多一样，只是中间少了个text，抓狂了，难道有什么规律？)我们继续看，第三条console是获取父级节点下的第一个子节点(跟文本一 差不多一样，获取的#Text);继续->
 
文本三：第二条console返回的是父级元素下的所有节点元素(超级正常有没有，高兴地飞起--这是你们再回去看一下文本四的代码)我们继续看，第三条console是获取父级节点下的第一个子节点(一切正常，这是为啥呢！难道脸黑);
 
总结下：我想有的人大概看出了规律，没错，你没猜错，就是标签与标签之间不能换行，每当你换行JS 默认会把换行当成text元素加入到数组中，这就是你获取不到想要的节点的原因。
 
那么问题来了，这个如何解决呢？
 
答：其实很简单 就是删除  数组中没必要的元素(text)；
 
(我知道你们再想什么，嘿嘿，尼玛讲了一堆有的没的，敢不敢上代码)
 
好我就上代码：
 
function jsCopy(ev){
 
var ele=ev.parentNode;
 
var elem_child = ele.childNodes;
 
for(var i=0 in elem_child){ //遍历子元素数组
 
if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {
 
//删除数组中的text
 
ele.removeChild(elem_child[i]);
 
}
 
}
 
console.log(ele.firstChild);
 
console.log('---------------------分界线-----------------------');
 
}
 
运行一下
 

 
一切正常有没有，终于获取到想要的了。
 
这里我只做了获取父级节点，子节点，其他的获取雷同，所以一定要console，才能知道这些不为人知的秘密。
 
为了方便大家我就把JS获取节点的方法粘出来：
 
var a= document.getElementByIdx_x_x("dom");
 
jsCopy(a);//调用清理空格的函数
 
var b= a.childNodes;//获取a的全部子节点；
 
var c= a.parentNode;//获取a的父节点；
 
var d= a.nextSibling;//获取a的下一个兄弟节点
 
var e= a.previousSibling;//获取a的上一个兄弟节点
 
var f= a.firstChild;//获取a的第一个子节点
 
var g= a.lastChild;//获取a的最后一个子节点
 
这次就写到这，如有更好的可以留言分享下，在下先谢谢了！

HTML内容
 
<div id="head">
    <div class="head_wrapper">1</div>
    <div class="headBlock">2</div>
</div>
 
原生JS获取节点 
 
在这里推荐使用element元素的方法 
 因为节点得到的是一个节点集合
 
//得到全部子节点childNodes 
document.getElementById('head').childNodes 
//NodeList(5) [text, div.head_wrapper, text, div.headBlock, text]

//得到父节点
document.querySelector('.head_wrapper').parentNode
//下一个兄弟节点
document.querySelector('.head_wrapper').nextSibling
//上一个兄弟节点
document.querySelector('.headBlock').previousSibling
//第一个子节点
document.getElementById('head').firstChild 
//最后一个子节点
document.getElementById('head').lastChild
//是否有子节点
document.getElementById('head').hasChildNodes()

//得到父级元素
document.querySelector('.head_wrapper').parentElement
//<div id="head"></div>

//下一个兄弟元素
document.querySelector('.head_wrapper').nextElementSibling
//<div class="headBlock"></div>

//上一个兄弟元素
document.querySelector('.headBlock').previousElementSibling
//<div class="head_wrapper"></div>

//第一个子元素
document.getElementById('head').firstElementChild
//<div class="head_wrapper"></div>

//最后一个子元素
document.getElementById('head').lastElementChild
//<div class="headBlock"></div>

//是否有子元素
document.getElementById('head').children.length == 0
//false

//获取该节点下的所有文本
document.getElementById('head').textContent
//1,2

//获取该节点下的文本
document.getElementById('head').innerText
//1,2
 
原生JS Class 增删改查 
 
//添加Class
document.getElementById('head').classList.add('add') //('add1','add2')
//<div id="head" class="add"></div>

//删除Class
document.getElementById('head').classList.remove('add')
//<div id="head"></div>


//切换class toggle
document.getElementById('head').classList.toggle('add')
//打印true 代表添加成功，<div id="head" class="add"></div>
//打印false为删除成功, <div id="head"></div>

//是否存在Class
document.getElementById('head').classList.contains('add')
//返回 true和false

//返回类名在元素中的索引值。索引值从 0 开始。
<div id="head" class="add remove"></div>
document.getElementById('head').classList.item(1)
//remove
 
原生JS 属性设置和获取
 
//属性元素
document.getElementById('head').setAttribute('set', 'value');  
//<div id="head" set='value'></div>

//获取属性
document.getElementById('head').getAttribute('set')
//"value"  不存在为null
 
原生JS DOM增删
 
//已有元素前插入元素insertBefore
<ul id="box">
  <li>001</li>
</ul>
var newItem=document.createElement("li")
var lis=document.getElementsByTagName("li");
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.insertBefore(newItem,lis[0]);
//<ul id="box">
//  <li>002</li>
//  <li>001</li>
//</ul>

//已有元素内追加元素appendChild
<ul id="box">
  <li>001</li>
</ul>
var newItem=document.createElement("li")
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.appendChild(newItem);
//<ul id="box">
//  <li>001</li>
//</ul>

 
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结：
 
通过顶层document节点获取：
 
document.getElementById(elementId)
 
该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
 
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
 
document.getElementsByName(elementName)
 
该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
 
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
 
document.getElementsByTagName(tagName)
 
该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点。
 
通过父节点获取
 
parentObj.firstChild
 
如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
 
parentObj.lastChild
 
很显然，这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样，它也可以递归使用。
 
在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...
 
parentObj.childNodes
 
获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
 
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
 
parentObj.children
 
获取已知节点的直接子节点数组。
 
注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
 
parentObj.getElementsByTagName(tagName)
 
使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
 
通过临近节点获取
 
neighbourNode.previousSibling
 
获取已知节点(neighbourNode)的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
 
neighbourNode.nextSibling
 
获取已知节点(neighbourNode)的下一个节点，同样支持递归。
 
通过子节点获取
 
childNode.parentNode
 
获取已知节点的父节点。
 
上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。