阳江网站建设黑龙江省建设信息网
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名字的元素， 那么拿到该元素如果没有，返回null2) 根据class获取元素-> 语法 document.getElementsByClassName('class名字')-> 返回值 是一个伪数组如果页面上有该class名字的元素，那么全部获取，放到伪数组中返回如果没有，返回一个空数组3) 根据标签名获取元素-> 语法 document.getElementsByTagName('标签名')-> 返回值 是一个伪数组如果页面上有 该标签名对应的元素 ，那么全部获取，放到伪数组中返回如果没有，返回一个空数组4) 根据选择器获取一个元素-> 语法 document.querySelector('选择器')-> 返回值如果页面上有 该选择器对应的元素， 那么获取满足条件的第一个如果没有，返回null5) 根据选择器 获取一组元素-> 语法 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><tablecellpadding="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>