js获取页⾯元素的7种⽅法
1、通过ID来获取页⾯元素：
<div id='box'></div>
<script>
let box = ElementById('box');
console.log(box);        // 输出是整条语句 <div id='box'></div>
</script>
获取类的话需要⽤到className，因为class是⼀个关键字：
div id="box" class="one"></div>
<script>
let box = ElementById('box');
box.className;
console.log(box.className);  // 输出是类名 one
</script>
注意：
1、如果页⾯上没有这个id的元素，通过这个id来获取的就是⼀个null
2、有些浏览器认为id是唯⼀的，所以可以⽤id来代替那个元素.，但是不建议这样⽤, 建议还是先获取元素 2、通过类名来获取页⾯元素：
.获取到的是⼀个集合，伪数组. ⾥⾯存放的是⼀个个的元素
<ul>
<li class="one">1</li>
<li class="one">2</li>
<li class="one">3</li>
</ul>
<script>
let lis = ElementsByClassName('one');
console.log(lis);    //输出的是伪数组 [li.one, li.one, li.one]
</script>
如果要得到第2个li标签，可以通过数组的下标得到：
<script>
let lis = ElementsByClassName('one');
let li2 = lis[1];
console.log(li2);            //输出 <li class='one'>2</li>
</script>
类名的获取：
<ul>
<li class="one">我是第1个li标签</li>
<li class="one">我是第2个li标签</li>
<li class="one">我是第3个li标签</li>
</ul>
<script>
let lis = ElementsByClassName('one');
let li2 = lis[1];
li2.className += ' two'
console.log(li2.className);  //输出 one two
</script>
注意：
1、下⾯这样设置会把原来的类名覆盖掉
li2.className = 'two';        //会得到<li class="two">2</li>
2、如果不覆盖，要先获取再追加
li2.className += ' two';    //这⾥需要空格⼀下，类名才不会相连
3、通过标签名来获取页⾯元素：
是获取页⾯上的所有该标签，得到的是⼀个对象，是伪数组（并不是数组）,⾥⾯放的是⼀个个的元素
类似于类名的获取，需要通过下标去取⾥⾯的值，但是getElementsByTagName是通过"标签名"来获得
<li>我是第2个li标签</li>
<li>我是第3个li标签</li>
</ul>
<script>
let li2 = ElementsByTagName('li')[1];
console.log(li2);                  //'<li>我是第2个li标签</li>'
console.log(Array.isArray(lis));        //false  不是数组
</script>
4、通过name属性获取页⾯元素：
<!-- div标签默认没有name，但是我们可以给他添加⼀个name属性 -->
<div name='one'></div>
<!-- 表单元素，是默认有name属性 -->
<input type="text" name="one" id="">
<input type="password" name="one" id="">
<input type="radio" name="one" id="">
<input type="checkbox" name="one" id="">
<script>
//需求: 通过name属性去获取元素们.
let eles = ElementsByName('one');html document是什么
console.log(eles);
</script>
注意: 这种获取元素的⽅式⽤的不多.
5、H5新增的获取元素的⽅式(需考虑浏览器兼容)
1、document.querySelector('选择器');      //获取满⾜条件的第⼀个元素 id带#,  类带.
<li class="one">我是第2个li标签</li>
<li class="one">我是第3个li标签</li>
<li>我是第4个li标签</li>
<li class="one">我是第5个li标签</li>
<li>我是第6个li标签</li>
<li>我是第7个li标签</li>
<li id="one">我是第8个li标签</li>
<li id="two">我是第9个li标签</li>
<li>我是第10个li标签</li>
<span class="one">span1</span>
<span class="one">span2</span>
</ul>
<ol>
<li class="one">我是ol中的第1个li标签</li>
<li>我是ol中的第2个li标签</li>
</ol>
<script>
let ele = document.querySelector('#one');
console.log(ele);      //输出 <li id="one">我是第8个li标签</li>
let eles = document.querySelector('.one');
console.log(eles);  //输出 <li class="one">我是第2个li标签</li>
</script>
6、H5新增的获取元素的⽅式(需考虑浏览器兼容)
2.document.querySelectorAll('选择器');        //获取满⾜条件的所有元素
let ele = document.querySelectorAll('ol>li');
console.log(ele);          //获取到的是ol下的所有li元素
7、直接通过标签获取，例如：body
document.body.样式.属性 = ‘ 属性值 ’；              //设置body元素的样式AND: document.documentElement是专门获取html这个标签的，⼏乎很少⽤到

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。