DOM学习
一、 什么是DOM
- 文档对象模型，是一个编程接口
- 可以改变网页的结构、内容、属性
二、获取页面元素
根据ID获取： getElementByID（'id名'）
- 不需要加#
- 返回的是一个元素对象
根据标签名获取 getElementsByTagName （'标签名'）
- 返回的是获取过来的元素对象集合，以伪数组的形式存储
- 没有这个元素，返回的是伪数组
- 页面中有ul >li , ol > li ,怎么获取ul中的li
- 父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <ol id="ol"> <li>我是ol中的li</li> <li></li> <li></li> <li></li> <li></li> </ol> </body> </html> <script> // 获取li var lis = document.getElementsByTagName('li'); for (let index = 0; index < lis.length; index++) { // console.log(lis[index]); } // 获取ol中的li var olLis = document.getElementById('ol'); console.log(olLis.getElementsByTagName('li')); </script>
通过HTML5新增方法获取 :
- 通过类名获取：document.getElementsByClassName('类名')
- 获取任意标签的选择器：document.querySelector('选择器') // 根据指定选择器返回第一个元素，如果是类选择器要加' . ' , 如果是id选择器要加' # ' ，如果是标签选择器直接写
- document.querySelectorAll('选择器') 返回所有选择器的元素
特殊元素获取
- 获取body元素： document.body;
- 获取html元素： document.documentElement;
三、给元素注册事件
- 事件： js侦测到的行为，理解伪：触发--响应机制
三要素
- 事件源： 事件被触发的对象，谁被触发了
- 事件类型： 如何触发：鼠标点击、鼠标经过、鼠标移出等
- 事件处理程序： 鼠标点击之后如何处理
<body> <button id="btn">唐伯虎</button> </body> </html> <script> // 获取元素 事件源 var btn = document.getElementById('btn'); // 事件类型； 点击事件 btn.onclick = function() { // 事件处理程序： 点击事之后，返回了一个弹框 alert('点了一下秋香'); } </script>
四、操作DOM的属性 ( 元素 )
-
改变元素内容
- element.innerTest
- element.innerHTML (推荐使用)
异同点：
- 都可以修改元素的内容
- innerTest 不能识别html标签
- innerHTNM 识别html标签，W3C标准
- 都是可读写的，可以获取元素的内容
// 获取p标签里面的内容 var p = document.getElementByTagName('p'); p.onclick = function() { console.log(p.innerTest);// 去除空格和换行 console.log(p.innerHTML);// 保留空格和换行，包括标签 }
-
操作表单，利用DOM可以操作type、value、checked、selected、disabled 表单属性
- disabled = true; 表示按钮被禁用
<body>
<button id="btn">点我</button>
<input type="text" value="你好！">
</body>
</html>
<script>
var btn = document.getElementById('btn');
var input = document.getElementsByTagName('input')[0];
btn.onclick = function() {
input.value = '啊， 我被点击了';
// btn.disabled = true;
// this表示当前调用事件的对象，好用推荐使用
this.disabled = true;
}
</script>
- 表单的经典使用案例，显示与隐藏案例
-
属性操作
可以通过js修改元素的大小、颜色、位置等样式
- 样式少，通过行类样式修改：element.styule
- 样式多，通过类型样式操作 : element.className;
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
</body>
</html>
<script>
var div = document.getElementsByTagName('div')[0];
div.onclick = function () {
div.style.backgroundColor = 'purple';
}
</script>
- 就是里面样式采用驼峰命名法
- js修改style属性操作，产生的是行内样式，css权重比较高
五、补充
- console.dir(对象)； // 打印我们返回的元素对象
- 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 鼠标获取焦点触发 |
| onblur | 鼠标失去焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
