♥一.01-getElementByld获取元素
<body>
<!-- 书写顺序 先有文档：文档从上往下加载 所以先有标签再有js -->
<div id="time">2019-9-9</div>
<script>
// get 获得element 元素 by 通过小驼峰命名法
// 参数id是大小写敏感的字符串
// 返回的是一个元素对象
let timer = document.getElementById('time')
console.log(timer); //输出：标签与内容全部都获得了
console.log(typeof timer) //检测数据类型 是一个元素对象
console.dir(timer) //返回更多的详细内容 里面能看到 对象 与文本内容
</script>
</body>
♥二.02-element.getElementsByTagName('')-获取某些元素
<body>
<ul>
<li>1我是小li</li>
<li>2我是小li</li>
<li>3我是小li</li>
<li>4我是小li</li>
<li>5我是小li</li>
</ul>
<ul id="nav">
<li>小li</li>
<li>小li</li>
<li>小li</li>
<li>小li</li>
<li>小li</li>
</ul>
<script>
let lis = document.getElementById('li')
console.log(lis);
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
let nav = document.getElementsByTagName('nav')
let navlis = document.getElementsByTagName('li')
// element.getElementsByTagName('')
console.log(navlis)
</script>
</body>
♥三.03-H5新增获取元素方式
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
