元素选择器

发表于 | 分类于

元素选择器

一 : 即时匹配元素

1 document.querySelector( ) 匹配选中的第一个HTML元素，如果没有匹配到，则返回 null ;

2 document.querySelectorAll( ) 匹配的是对象并不是实时的，后续更新的文档并不会被匹配到，它只包含当前调用时刻选择器所匹配的元素，如果匹配不到则返回一个空的nodelist对象；

二 实时匹配元素

1 getElementById getElementsTagName getElementsByClassName 等获取元素都是实时的；

三 对于有id属性的元素，可以直接通过window.id 获取到该元素

1
2
3
4
<div id="div1">	</div>
<script>
	console.log(window.div1);
</script>

四 对于form表单元素，如果form表单元素有id和name属性，可以直接通过name属性和id拉访问form属性，也可以直接通过元素document.forms来访问，这个获取的是一个HTMLCollection类数组

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="#" id="formId" name="subName">
    <input type="text"/>
    <input type="password"/>
    <input type="button "/>
</form>
<form action="##" id="form22" name="address"></form>
<script>
    //对于有name和id属性的form可以直接通过window.id  window.name  来访问元素
    console.log(document.forms);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
    console.log(document.forms.subName);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
    console.log(document.forms.address);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
  //获取form表单里面的元素
     console.log(document.forms.subName[0]);//可以通过索引来获取对应的表单元素
    //也可以直接通过 id 和  name  直接访问 form表单
    console.log(window.formId);
    console.log(window.subName);
    console.log(document.subName);
</script>
</body>
</html>