目录
通过常用的DOM操作获取元素，可以使用如下方式：
- 根据ID获取
- 根据标签名获取
- 通过子父关系获取
- 通过H5新增方法获取
- 获取特殊元素获:Body、HTML
根据ID获取元素
方法：getDocumentByID
<body>
<div id="ele_div"></div>
<script>
var ele = document.getElementById("ele_div")
console.log(ele);
console.log(typeof ele ); //object
</script>
</body>
//需要注意点：
语法：document.getElementById（id）
1.参数id大小写敏感。
2.返回的是一个对象。根据标签获取元素
getElementsByTagName()
返回一个对象的集合，需要遍历后操作。
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<script>
var eles = document.getElementsByTagName('li');
// console.log(eles);//方法返回为伪数组形式
//遍历返回对象
for(var i = 0 ; i < eles.elngth; i++){
console.log(eles[i]);
}
</script>
</body>通过子父关系获取
操作时父元素必须是单个对象，获取时候不包括父元素自己。
<body>
<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ul>
<ol id="olol">
<li>列表内容4</li>
<li>列表内容5</li>
<li>列表内容6</li>
</ol>
<script>
//获取指定子父类关系的元素
//方式一：
var ol = document.getElementsByTagName('ol');
var lis1 = ol[0].getElementsByTagName('li') //伪数组不可调用该方法
console.log(lis1);
// 方式二 :通过id的方式获取，直接得到元素，避免了伪数组调用
var olol = document.getElementById('olol')
console.log(olol.getElementsByTagName('li'));
</script>
</body>
通过H5新增方法获取
1.document.getElementsByClassName(‘类名’);
根据类名返回元素集合
<body>
<span class="span">span标签1</span>
<span class="span">span标签2</span>
<div class="div"></div>
<script>
var span = document.getElementsByClassName('span');
console.log(span.length); //2
</script>
</body>2.document.querySelector(‘选择器’);
根据指定选择器返回第一个元素对象
<body>
<span class="span">span标签</span>
<div id="div">div</div>
<div class="cdiv">cdiv1</div>
<div class="cdiv">cdiv2</div>
<script>
var tag = document.querySelector("span");//获取第一个标签名为span的元素
var id = document.querySelector("#div");//获取第一个id为div的元素
var clazz = document.querySelector(".cdiv");//获取第一个class为cdiv的元素
var cAll = document.querySelectorAll(".cdiv")//获取全部class为.cdiv的元素，返回伪数组形式
console.log(cAll.length);//2
</script>
</body>获取特殊元素：HTML、Body
1.获取body元素：document.body
<body>
<script>
var body = document.body;
console.log(body);
</script>
</body>2.获取html元素 document.documentElement
<body>
<script>
var html = document.documentElement;
console.log(html);
</script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154580.html
