【JavaScript】JS的三大组成-DOM
文章目录
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>