JS获取HTML DOM元素的方法

<div class="div0">1</div>
<div id="diva">
    <div></div>
    <div class="div0">2</div>
    <div></div>
    <div class="div0"></div>
    <div id="div1"></div>
</div>
<form action="">
    <!-- 所有的表单必须写name -->
    <input type="text" name="names">
    <input type="password" name="password">
    <input type="radio" name="sex" value="男">
    <input type="radio" name="sex" value="女">
    <input type="submit">
</form>

参考以上代码分析JS获取HTML DOM元素的方法

  1.(1)根据id获取标签元素
  var div1=document.getElementById("div1");
  	(2)根据标签名获取标签列表
  var divs=document.getElementsByTagName("div");
  	(3)根据className获取标签列表
  var div0=document.getElementsByClassName("div0");
  	说明：
  			getElementsByTagName和getElementsByClassName获取到的都是HTMLCollection列表(里面只有标签元素),即HTML列表
  			获取id必须使用document调用getElementById，不能使用父元素调用
  			
  2.仅用于IE8以后
    (1)根据选择器获取第一个找到的元素
    var div=document.querySelector("div");
    var div1=document.querySelector("#div1");
    var div0=document.querySelector(".div0");
    var div0=document.querySelector("#diva>.div0");
    var ps=document.querySelector("[name=password]");
    (2)根据选择器获取所有的元素
    var div=document.querySelectorAll("div");
    (3)var diva=document.querySelector("#diva");
    	console.log(diva.childNodes);    //获取子节点
    	console.log(diva.children);      //获取子元素，常用

    	console.log(diva.parentNode);    //父节点
    	console.log(diva.parentElement);  //父元素
    	
    	console.log(diva.firstChild);    //第一个子节点
    	console.log(diva.firstElementChild);   //第一个子元素

    	console.log(diva.lastChild);    //最后一个子节点
    	console.log(diva.lastElementChild);   //最后一个子元素

    	console.log(diva.nextSibling);      //下一个兄弟节点
    	console.log(diva.nextElementSibling);    //下一个兄弟元素

   		console.log(diva.previousSibling);    //上一个兄弟节点
    	console.log(diva.previousElementSibling);   //上一个兄弟元素