1、querySelector() 获取匹配的第一个元素
1.1直接获取标签 ----- 有两个div,只获取第一个div。
<div class="myclass">11</div>
<div class="mclass">2222</div>
<script>
// 如果有相同的只会选择第一个
const elements = document.querySelector('div')
console.log(elements);
</script>
1.2直接获取class类名 ----- 两个类名一样(myclass),只获取第一个myclass,使用querySelector获取类名元素,要把 ‘.’写上。
<div class="myclass">11</div>
<div class="myclass">2222</div>
<script>
// 如果有相同的只会选择第一个
const elements = document.querySelector('.myclass')
console.log(elements);
</script>
1.3直接获取id ----- 使用querySelector获取类名元素,要把 ‘#’写上。
<div id="myid">2222</div>
<script>
// 如果有相同的只会选择第一个
const elements = document.querySelector('#myid')
console.log(elements);
</script>
1.4可以获取父标签里的子标签,例如:ul li,使用querySelector默认选中ul 里面的第一个li。
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
// 如果有相同的只会选择第一个
const elements = document.querySelector('ul li')
console.log(elements);
</script>
1.5还可以获取父标签里的指定子标签,使用nth-child选择器。
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
// 如果有相同,使用nth-child选择器可以选择获取指定的元素
const elements = document.querySelector('ul li:nth-child(2)')
console.log(elements);
</script>
***使用querySelector获取元素,返回值是:一个HTMLElement对象***
*querySelector获取到的元素可以直接操作修改
<body>
<div class="myclass">@@@1</div>
<div class="myclass">@@@2</div>
<div id="myid">###1</div>
<script>
const elements = document.querySelector('.myclass:first-child')
// 可直接修改
elements.style.color = 'red'
</script>
</body>
2、querySelectorAll() 获取匹配的全部元素
2.1直接获取标签 ----- 有三个div,获取全部div元素。
<body>
<div class="myclass">@@@</div>
<div id="myid">###1</div>
<script>
// 获取全部div元素
const elements = document.querySelectorAll('div')
console.log(elements);
</script>
</body>
2.2直接获取class类名 ----- 两个类名一样(myclass),获取全部myclass,使用querySelectorAll获取类名元素,要把 ‘.’写上。
<body>
<div class="myclass">@@@</div>
<div class="myclass">@@@</div>
<div id="myid">###1</div>
<script>
// 获取全部div元素
const elements = document.querySelectorAll('.myclass')
console.log(elements);
</script>
</body>
2.3直接获取id ----- 使用querySelectorAll获取类名元素,要把 ‘#’写上。
<body>
<div class="myclass">@@@</div>
<div class="myclass">@@@</div>
<div id="myid">###1</div>
<script>
// 获取全部div元素
const elements = document.querySelectorAll('#myid')
console.log(elements);
</script>
</body>
2.4可以获取父标签里的全部子标签,例如:ul li,使用querySelectorAll默认选中ul 里面的全部li。
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
// 获取ul下的所有li
const elements = document.querySelectorAll('ul li')
console.log(elements);
</script>
</body>
2.5还可以获取父标签里的指定子标签,使用nth-child选择器。
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
// 使用nth-child获取ul下的指定li
const elements = document.querySelectorAll('ul li:nth-child(2)')
console.log(elements);
</script>
</body>
***使用querySelectorAll获取元素,返回值是:一个NodeList对象集合,这个只是个伪数组***
*有长度有索引的数组,但是没有push、pop这些数组方法(伪数组)。
*返回的是一个伪数组,不可以直接修改,只能通过遍历的方式一次给里面的元素做修改。
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
const elements = document.querySelectorAll('ul li')
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red'
}
</script>
</body>
3、通过ID获取,getElementById
<body>
<div id="myid">111</div>
<script>
const elements = document.getElementById("myid");
console.log(elements);
</script>
</body>
***使用getElementById获取元素,返回值是:一个HTMLElement对象***
*getElementById获取到的元素可以直接操作修改
4、通过类名class,getElementsByClassName
<body>
<div class="myclass">111</div>
<script>
const elements = document.getElementsByClassName("myclass");
console.log(elements);
</script>
</body>
***使用getElementsByClassName获取元素,返回值是:一个HTMLCollection对象集合,这个只是个伪数组***
*有长度有索引的数组,但是没有push、pop这些数组方法(伪数组)。
*返回的是一个伪数组,不可以直接修改,只能通过遍历的方式一次给里面的元素做修改。
5、通过标签名,getElementsByTagName
<body>
<div class="myclass">111</div>
<div class="myclass">111</div>
<script>
const elements = document.getElementsByTagName('div');
console.log(elements);
</script>
</body>
***使用getElementsByTagName获取元素,返回值是:一个HTMLCollection对象集合,这个只是个伪数组***
*有长度有索引的数组,但是没有push、pop这些数组方法(伪数组)。
*返回的是一个伪数组,不可以直接修改,只能通过遍历的方式一次给里面的元素做修改。
6、获取html的方法(document.documentElement)
<body>
<div class="myclass">111</div>
<div class="myclass">111</div>
<script>
const elements = document.documentElement;
console.log(elements);
</script>
</body>
打印的结果:![](https://i-blog.csdnimg.cn/blog_migrate/2aebe45c99b88280fa9e6804711645ad.png)
7、获取body的方法(document.body)
<body>
<div class="myclass">111</div>
<div class="myclass">111</div>
<script>
const elements = document.body;
console.log(elements);
</script>
</body>
打印结果:
8、获取head的方法(document.head)
<body>
<div>111</div>
<script>
const elements = document.head
console.log(elements);
</script>
</body>
打印结果:
9、获取带有name的标签,getElementsByName
<body>
<input type="text" name="user" value="11">
<script>
const elements = document.getElementsByName("user");
console.log(elements);
</script>
</body>