JavaScript·DOM·Web_API之①元素获取方法总结

                         QQ:3020889729                                                                                 小蔡

通过id名获取元素
通过标签获取元素
通过类获取元素
通过选择器获取元素
获取body元素
获取html元素

                         QQ:3020889729                                                                                 小蔡

通过id名获取元素

获取指定元素，可使用document对象下的getElementById方法，就可以得到指定元素的内容。
使用方法：document.getElementById(‘id’)
（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
  <div id = "ts">如果返回该标签，返回的是什么呢</div>
	<script type="text/javascript">
		//getElementById('ts')用以获取指定id名的元素(返回包含元素全部信息的对象) 
		var element_x1 = document.getElementById('ts'); 
		//id名获取元素，直接返回的是该标签的全部(返回的是一个对象) 
		console.log(element_x1);
		console.log(typeof element_x1); 
		console.dir(element_x1); 
		//输出对象使用dir，输出完整的对象——它的属性和方法
	</script>
</body>
</html>

效果：
在这里插入图片描述

通过标签获取元素

获取指定元素，可使用document对象下的getElementsByTagName方法，就可以得到指定元素的内容。
使用方法：document.getElementsByTagName(‘tagname’)
（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
  <!-- <div id = "ts">如果返回该标签，返回的是什么呢</div> -->
  <ul id = "ul" class = "ul">
    <li>12</li>
    <li>ab</li>
    <li>34</li>
    <li>cd</li>
  </ul>
  <ol id = "ol" class = "ul">
    <li>a1</li>
    <li>b1</li>
    <li>c1</li>
    <li>d1</li>
  </ol>
  <script type="text/javascript">
	// 通过标签名获取元素 getElementsByTagName('tagName');
    // 返回的是一个该标签全部元素的一个对象的集合，是一个伪数组
    // 伪数组——仅有length属性和数组的调用元素的功能
    var tag_1 = document.getElementsByTagName('li');
    console.log(tag_1);
    // 直接输出，是输出的伪数组 （包含属性)
    console.log(tag_1[0]);
    // 指定输出第几个标签元素，输出的是该标签（元素）的全部内容
    console.dir(tag_1);
    // 用dir输出，可以输出其内容和属性
    </script>
</body>
</html>

效果：
在这里插入图片描述

通过类获取元素

获取指定元素，可使用document对象下的getElementsByClassName方法，就可以得到指定元素的内容。
使用方法：document.getElementsByClassName(‘classname’)
（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
  <!-- <div id = "ts">如果返回该标签，返回的是什么呢</div> -->
  <ul id = "ul" class = "ul">
    <li>12</li>
    <li>ab</li>
    <li>34</li>
    <li>cd</li>
  </ul>
  <ol id = "ol" class = "ul">
    <li>a1</li>
    <li>b1</li>
    <li>c1</li>
    <li>d1</li>
  </ol>
  <script type="text/javascript">
	// 类获取——需要ie9即以上
    // 通过类获取元素，返回的是一个伪数组，包含使用该类的全部标签（元素）对象的根信息
    // 根信息——就是显示标签对象——内容并未直接显示
    // 包含#前的标签，#后的id名字，.跟的是类名
    var ul_class_element = document.getElementsByClassName('ul');
    console.log(ul_class_element);
    // 指定输出包含该类的对象的全部信息内容——包含其子元素成份
    // （也就是输出完整的一个元素对象）
    console.log(ul_class_element[0]);
    </script>
</body>
</html>

效果：
在这里插入图片描述

通过选择器获取元素

获取指定元素，可使用document对象下的querySelectorAll/querySelector方法，就可以得到指定元素的内容。
使用方法：
document.querySelectorAll(‘query’)(获取使用该选择器的全部对象)
document.querySelector(‘query’)(获取使用该选择器的第一个对象（元素）)

（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
  <!-- <div id = "ts">如果返回该标签，返回的是什么呢</div> -->
  <ul id = "ul" class = "ul">
    <li>12</li>
    <li>ab</li>
    <li>34</li>
    <li>cd</li>
  </ul>
  <ol id = "ol" class = "ul">
    <li>a1</li>
    <li>b1</li>
    <li>c1</li>
    <li>d1</li>
  </ol>
  <script type="text/javascript">
	// 返回使用该选择器的第一个元素，返回的是一个对象的内容
    var selector_2 = document.querySelectorAll('ul');
    // 返回的是使用该选择器的全部元素，是一个伪数组
    var selector_1 = document.querySelector('ul');
    console.log(selector_1);
    console.log(selector_2);
    // 输出伪数组中的指定对象全部内容
    console.log(selector_2[0]);
    </script>
</body>
</html>

效果：
在这里插入图片描述

获取body元素

获取body元素，只需要使用document对象下的body属性，就可以得到body元素的内容。
使用如下：document.body
（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
    <div id = "ts">如果返回该标签，返回的是什么呢</div>
	<script type="text/javascript">
		// 获取body标签元素对象，使用属性body
   	    // 返回的是一整个body对象的全部内容
   	    var bodyele = document.body;
	    console.log(bodyele);
	    console.dir(bodyele);//返回对象属性和方法
    </script>
</body>
</html>

效果：
在这里插入图片描述

获取html元素

获取html元素，只需要使用document对象下的documentElement属性，就可以得到html元素的内容。
使用方法：document.documentElement
（主要代码内容和解释在body下的script标签下）
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取元素练习</title>
</head>
<body>
	  <div id = "ts">如果返回该标签，返回的是什么呢</div>
	<script>
	//获取html标签元素对象，使用属性documentElement
    //返回的是一整个html对象的全部内容（文档全部内容就是html的对象内容）
    var htmlele = document.documentElement;
    console.log(htmlele);
    console.dir(htmlele);
    </script>
</body>
</html>

效果：
在这里插入图片描述