js，jquery获取节点以及内容和属性

JS获取DOM元素的方法:

document.getElementById('id');                  通过ID获取
document.getElementsByName('name');             通过name属性
document.getElementsByTagName('div');           通过标签名
document.getElementsByClassName('classname');   通过类名
document.querySelector('.animated');            通过选择器获取一个元素
document.querySelectorAll('.animated');         通过选择器获取一组元素
document.documentElement                        获取html的方法document.documentElement是专门获取html这个标签的
document.body                                   获取body的方法document.body是专门获取body这个标签的。   

• 所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。
• getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

querySelector()与querySelectorAll()两者的联系与区别：

• 联系： 两者括号中的取值都是选择器
• 区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

原生javascript方法：

var a = document.getElementById(“dom”);	通过id获取到该节点
del_space(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的最后一个子节点

jQuery方法：

jQuery.parent(expr) ;	找父元素
jQuery.parents(expr) ;	找到所有祖先元素，不限于父元素
jQuery.children(expr) ;	查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
jQuery.contents() ;	查找下面的所有内容，包括节点和文本.
jQuery.prev() ;	查找上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll() ;	查找所有之前的兄弟节点
jQuery.next() ;	查找下一个兄弟节点，不是所有的兄弟节
jQuery.nextAll() ;	查找所有之后的兄弟节点
jQuery.siblings() ;	查找兄弟节点，不分前后
jQuery.find(expr); $ (“p”).find(“span”)是从元素开始找,等于$(“p span”)	跟jQuery.filter(expr)完全不一样而jQuery.find()的返回结果，不会有初始集中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，
jQuery.filter(expr);	是从初始的jQuery对象集合中筛选出一部分

内容和属性值

js获取text、html、属性值、value的方法

document.getElementById("test").innerText；
document.getElementById("test").innerHTML；
document.getElementById("test").id；
document.getElementById("test1").value;

jQuery获取text、html、属性值、value的方法

$("#test").text()或者$("#test").innerText
$("#test").html()或者$("#test").innerHTML
$("#test").attr("id")
$("#test").attr("value")或者$("#test1").val()或者$("#test1").value

结果对比

html:

    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>

js:

js与jQuery，text与innerText获取

  $("#btn10").click(function(){
    alert("Text: " + $("#test").text());  
    <!--结果   Text: 这是段落中的 粗体 文本。-->
  });
    $("#btn11").click(function(){
    alert("Text: " + $("#test").innerText); 
     <!--结果   Text: undefined。-->
  });
    $("#btn12").click(function(){
    alert("Text: " + document.getElementById("test").innerTEXT);  
     <!--结果   Text: test-->
    });

js与jQuery，html与innerHTML获取

    $("#btn20").click(function(){
    alert("HTML: " + $("#test").html());  
    <!--结果   HTML: 这是段落中的 <b>粗体</b> 文本。 -->
  });
  $("#btn21").click(function(){
    alert("HTML: " + $("#test").innerHTML); 
     <!--结果   HTML: undefined -->
  });
     $("#btn22").click(function(){
    alert("HTML: " + document.getElementById("test").innerHTML); 
     <!--结果  HTML: 这是段落中的 <b>粗体</b> 文本。 -->
  });

js与jQuery，属性值获取

     $("#btn30").click(function(){
    alert("id: " + document.getElementById("test").id);  
    <!--结果   id: test -->
  });
    $("#btn31").click(function(){
    alert("id: " + $("#test").attr("id"));  
    <!--结果   id: test -->    
  });

html:

   <input id='test1' value='aaa' class='test'>

js与jQuery，value获取

      $("#btn40").click(function(){
    alert("value: " + document.getElementById("test1").value);  
    <!--结果   value: aaa -->
  });
    $("#btn41").click(function(){
    alert("value: " + $("#test1").val());  
    <!--结果   value: aaa --> 
    val()只能用于input元素的value值获取
  });
    $("#btn42").click(function(){
    alert("value: " + $("#test1").attr("value"));  
    <!--结果  value: aaa -->
  });