测试2

DOM

DOM document Object Model 文档对象模型

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

image-20220517151058164

查找标签

直接查找
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

1、方法的返回值是dom对象还是数组

2、document对象可以是任意dom对象，将查询范围限制在当前dom对象

image-20220517151747656

导航查找标签
<div class="background">
   <div class="c1"></div>
    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </div>
</div>
<script>
    var c2 = document.getElementsByClassName("c2")[0];
    var c4 = document.getElementsByClassName("c4")[0];
    console.log(c2.parentElement);
    console.log(c2.children);
    console.log(c2.firstElementChild);
    console.log(c2.lastElementChild);
    console.log(c4.nextElementSibling);
    console.log(c4.previousElementSibling);
</script>

image-20220517201650042

css选择器
document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

绑定事件
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/ivanlee717/p/16285027.html

标签： javascript 技术文章 开发
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

Web前端入门教程
5843 9.8元
CSS3样式设计
4775 0元 限免