JS Dom操作之获取节点

获取节点的方法有：

• document.getElementById()
• document.getElementsByName()
• Ele.getElementsByTagName()
• Ele.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()

其中，第三个和第四个方法，也就是Ele加粗的方法，既可以由document对象调用，也可以由查找到的元素对象调用，下面举例说明

前三个方法支持IE6~IE8，即大多数浏览器均支持这些方法，其他方法需要IE8及以上版本

document.getElementById()

参数是html标签的标签的id值，会返回第一个符合查找条件的元素

	<p id="test">这是正确的信息</p>
	<p id="test">这是第二个正确的信息</p>
	
<script>
	var target = document.getElementById('test')
	console.log(target.innerHTML)
</script>

document.getElementsByName()

参数是html的标签的name属性值，会返回一个符合查找条件的元素集合

 <!-- document.getElementsByName -->
    北京<input type="checkbox" name="city" value="beijing" /> 上海<input
    type="checkbox"
    name="city"
    value="shnaghai"
    />
    武汉<input type="checkbox" name="city" value="wuhan" />
<script>
var cities = document.getElementsByName("city");
console.log(cities.length);
console.log(cities[0].value);
</script>

Ele.getElementsByTagName()

参数是html的标签名，会返回一个符合查找条件的元素集合
若参数是 ‘*’，表示查找该对象的所有子元素
参数不区分大小写

 <!-- Ele.getElementsByTagName -->
    <ul id="box">
      <li>北京</li>
      <li>上海</li>
      <li>武汉</li>
    </ul>
    
	<script>
 		// Element.getElementsByTagName**不区分大小写**
		var box = document.getElementById("box");
		var list1 = box.getElementsByTagName("li");
		var list2 = box.getElementsByTagName("LI");
		//查找box元素内的所有标签
		var tags = box.getElementsByTagName("*");
		console.log(list1.length);
		console.log(list2.length);
		console.log(tags);
	</script>

Ele.getElementsByClassName()

参数是html标签的class值，返回符合查找条件的元素集合

• 支持模糊查找，即查找一个className，凡是class值含有className的均能查找到
• 可以是多个参数，多个参数之间用空格隔开
• 多个参数时，参数的顺序可以颠倒

 <!-- Ele.getElementsByClassName -->
    <p class="light">文本1</p>

    <p class="dark">文本2</p>
    
    <!-- 一个标签可以有多个class名，使用空格隔开即可 -->
    <p class="darklight">这是一个类名 darklight</p>
    <p class="dark light">这是两个类名 dark和light</p>
    <p class="light dark">这是两个类名 light和dark</p>
    <p class="light">文本5</p>
<script>
 //Ele.getElementsByClassName
        console.log("Ele.getElementsByClassName");

        // getElementsByClassName()是一个模糊查找，一个标签中有多个class，只要有一个符合查找的值，就会找到
        var classTags1 = document.getElementsByClassName("light");

        // 通过打印可以发现 getElementsByClassName()参数若是多个class时 不区分先后顺序
        var classTags2 = document.getElementsByClassName('light dark');
        var classTags3 = document.getElementsByClassName('dark light');
        
        console.log('getElementsByClassName("light")');
        console.log(classTags1)
        console.log("getElementsByClassName('light dark')");
        console.log(classTags2)
        console.log("getElementsByClassName('dark light')");
        console.log(classTags3)
        
        console.log(classTags1[0].innerHTML);
</script>

document.querySelector()

方法返回文档中匹配指定 CSS 选择器的一个元素，参数根据需求可以是多样的

• 可以是标签名
• 可以是标签名与一些属性的结合
• 可以是class值
• 可以是id值
• 还可以是标签名与class的结合
• 还可以是表示关系的标签

 	<p id="first">段落一</p>
    <p id="first">段落二</p>
    <h5 class="test">五号标题</h5>
    <p class="test">段落三</p>
    <br />
    <a href="http://www.baidu.com">链接</a><br />
    <a href="http://www.baidu.com" target="_blank">链接</a><br />
    <div>
      <p>最后一个段落</p>
    </div>
    <button onclick="myFunction()">点我</button>
    <script>
   function myFunction() {
      //class为test的对象
      document.querySelector('.test').style.backgroundColor='blue';

      // class为test且标签名为p的对象
      document.querySelector('p.test').style.backgroundColor='blue';

      // id为first的对象
      document.querySelector('#first').style.backgroundColor='blue';

      document.querySelector('a').style.backgroundColor='blue';
      //标签为a且有属性target的对象
      document.querySelector('a[target]').style.backgroundColor='blue';

      //父元素为div的p元素
       var x = document.querySelector('div > p');
       x.style.backgroundColor='red';

       // 所有标签为p的元素集合
       var x = document.querySelectorAll("p");
       var i;
       
      }
    </script>

document.querySelectorAll()

方法返回文档中匹配指定 CSS 选择器的元素集合，参数根据需求可以是多样的

该方法的参数与使用方法和上面的querySelector均相同，区别在于前者返回第一个符合条件的元素，该方法返回查找到的元素集合

需要注意的是，若对返回的集合中所有元素进行操作，不能直接进行操作，需要使用循环一个一个的操作

    <p id="first">段落一</p>
    <p id="first">段落二</p>
    <h5 class="test">五号标题</h5>
    <p class="test">段落三</p>
    
<script>
	   // 将所有标签为p的元素背景颜色全部改为红色
       for (i = 0; i < x.length; i++) {
         x[i].style.backgroundColor = "red";
       }
</script>