【JavaScript】JS的三大组成-DOM

开源代码
2025-08-20 21:54:02

文章目录 DOM介绍获取元素1. 非常规元素2. 常规元素操作元素属性属性分类- 原生属性 w3c 标准内存在的属性- 自定义属性- H5 自定义属性操作元素属性原生属性操作自定义属性H5 自定义属性

DOM介绍 document object model 文档对象模型就是操作页面 (元素标签) -> 修改文本 -> 修改超文本 -> 元素增删改查 -> 操作标签样式 -> 操作标签类名 -> 操作标签属性... dom操作的过程 1. 找到元素 2. 操作获取元素 js中把标签分为两类 1. 非常规元素 -> html document.documentElement -> head document.head -> body document.body 2. 常规元素 1) 根据id获取元素 -> 语法 document.getElementById('id名字') -> 返回值如果页面上有该id名字的元素，那么拿到该元素如果没有，返回null 2) 根据class获取元素 -> 语法 document.getElementsByClassName('class名字') -> 返回值是一个伪数组如果页面上有该class名字的元素，那么全部获取，放到伪数组中返回如果没有，返回一个空数组 3) 根据标签名获取元素 -> 语法 document.getElementsByTagName('标签名') -> 返回值是一个伪数组如果页面上有该标签名对应的元素，那么全部获取，放到伪数组中返回如果没有，返回一个空数组 4) 根据选择器获取一个元素 -> 语法 document.querySelector('选择器') -> 返回值如果页面上有该选择器对应的元素，那么获取满足条件的第一个如果没有，返回null 5) 根据选择器获取一组元素 -> 语法 document.querySelectorAll('选择器') -> 返回值必然是一个伪数组如果页面上有该选择器对应的元素, 那么全部获取，放到一个伪数组中返回如果没有，返回一个空数组 <body> <div id="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="laowang"> <div class="xiaowang">6</div> </div> <div class="laoli"> <div class="xiaowang">7</div> </div> </body> <script> // 获取非常规标签 // console.log(document.documentElement); // console.log(document.head); // console.log(document.body); // 1. 根据id获取元素 // console.log(document.getElementById("box")); // 2. 根据class获取元素 // console.log(document.getElementsByClassName("box")); // var list = document.getElementsByClassName("box"); // for (var i = 0; i < list.length; i++) { // console.log(list[i]); // } // 3. 根据标签名获取元素 // console.log(document.getElementsByTagName("div")); // 4. 通过选择器获取元素 // console.log(document.querySelector(".laoli .xiaowang")); // 5. 通过选择器获取一组元素 console.log(document.querySelectorAll("div:nth-of-type(2n)")); </script> 操作元素属性

认识元素属性属性的格式 <div 属性=‘属性值’>

属性分类 - 原生属性 w3c 标准内存在的属性 eg: class id style border target href src。。。。 - 自定义属性没有特殊意义，是我们自己设置的属性 <div xiaohua='ymh' ></div> - H5 自定义属性以 data-开头的属性叫做H5 自定义属性操作元素属性 - 操作元素属性的时候，尽量不操作元素的类名和样式原生属性操作 - 直接使用属性名操作就可以语法元素.属性名 -> 写语法元素.属性名=值一些表单控件，属性值是布尔值(disabled, checked selected) 自定义属性 - 可以用来操作原生属性，但是一般不推荐 - 增 etAttribute(属性名, 属性值) - 删除 emoveAttribute(属性名) - 查 etAttribute(属性名) H5 自定义属性 - data- 表示是一个h5自定义属性 - data- 后面的内容才是属性名 - 每一个元素身上天生带有一个属性叫做dataset, 是一个类似对象的结构，内部记录的就是h5自定义的属性，所有可以直接操作dataset - 使用对象语法操作dataset <body> <div class="box" id="box" data-list="list" xiaohua="小花">啦啦啦</div> <table cellpadding="10" cellspacing="10" border="1" rules="rows" width="100" ></table> <input type="text" /> <p>哈哈哈哈</p> <h2 data-list="100" data-a="200" data-b="abcd">哈哈哈哈</h2> </body> <script> // 0 获取元素 // var table = document.querySelector("table"); // var inp = document.querySelector("input"); // // 1. 获取table的原生属性 // // console.log(table.border); // // 2. 设置input的原生属性 // inp.type = "checkbox"; // inp.checked = false; // 增加自定义属性 // 0 获取元素 // var p = document.querySelector("p"); // p.setAttribute("hello", 100); // // p.removeAttribute("hello"); // console.log(p.getAttribute("hello")); // 操作h5自定义属性 // 0 获取元素 var h2 = document.querySelector("h2"); var h2Dataset = h2.dataset; // 获取自定义属性的a // console.log(h2Dataset.a); // 增加自定义属性 // h2Dataset["c"] = 1000; // 删除自定义属性 delete h2Dataset.a; </script>

标签：

【JavaScript】JS的三大组成-DOM由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavaScript】JS的三大组成-DOM”

上一篇
【ARMv8SIMD和浮点指令编程】LibyuvI420转A

下一篇
bash查看变量函数定义和值(typedeclare)