js 获取html dom元素的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a id="aid" class="aclass" name="aname" href="http://www.sinmeng.net" οnclick="alert('clicked');">触发onclick</a>
	</div>
	

	<script>
		// (function fn(){
		// 	for(let i=1; i<10; i++){
		// 		document.write('<li>我是li的第 '+i+' 行</li>')
		// 	}
		// })();

		// 两秒后自动点击
		setTimeout(function() {
		    // IE浏览器
		    if(document.all) {
		        document.getElementById("clickMe").click();
		    }
		    // 其它浏览器
		    else {
		        var e = document.createEvent("MouseEvents");
		        e.initEvent("click", true, true);
		        document.getElementById("clickMe").dispatchEvent(e);
		    }
		}, 2000);
	</script>
</body>

</html>

比如获取上面html的的a标签：

  1. 通过ID获取（getElementById） 

    1
    2
    3
    const aID = document.getElementById('aid');
    console.log(aID);
    1. 通过name属性（getElementsByName）
      1
      2
      const aName = document.getElementsByName('aname')[0];
      console.log(aName);
    2. 通过标签名（getElementsByTagName）
      1
      2
      const a = document.getElementsByTagName('a')[0];
      		console.log(a);
    3. 通过类名（getElementsByClassName）
      1
      2
      3
      const aClass = document.getElementsByClassName('aclass')[0];
      console.log(aClass);
    4. 通过选择器获取一个元素（querySelector）
    1
    2
    const querySelector = document.querySelector('#aid');
    console.log(querySelector);

    1. 通过选择器获取一组元素（querySelectorAll）

      1
      2
      const SelectorAll = document.querySelector('div');
      console.log(SelectorAll);

    2. 获取html的方法（document.documentElement）是专门获取< html> 这个标签的

      1
      2
      const html= document.documentElement;
      console.log(html);

    3. 获取body的方法（document.body）是专门获取< body>这个标签的。

      1
      2
      const body= document.body;
      console.log(body);
javascript
#js #javascript
js 获取html dom元素的方式
https://github.com/chergn/chergn.github.io/ddf20ddfbdc1/
作者
全易
发布于
2024年3月28日
许可协议