本文详细介绍了DOM的概念，包括其在网页编程中的作用，以及如何通过id、标签名、类名和选择器获取元素。讲解了事件三要素、执行步骤，以及鼠标事件的使用实例，还涉及了元素内容的修改、属性操作和表单元素的控制。
js基础01
DOM
什么是DOM？
-
文档对象模型（Document Object Model），Html的标准编程接口。
-
通过这些Dom接口可以改变网页的内容、结构、样式。
DOM树
-
文档：一个html页面就是一个文档，DOM使用document表示
-
元素：页面中的所有标签都是元素，DOM使用element表示
-
节点：页面中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示
DOM把以上的内容都看做是对象
获取元素
1、根据id来获取
document.getElementById('id');
<script>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
- 可以通过console.dir（）来打印我们获取的元素对象，更好的查看对象里面的属性和方法。
2、根据标签来获取
2.1、直接获取某类标签
- 使用getElementByTagName()方法可以返回带有指定标签名的对象的集合（数组）
document.getElementsByTagName('标签');
注意：
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的。
- 如果获取不到元素，则返回空的伪数组。
2.2、获取某类元素（父元素）里面的子元素
例如：
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
var ol = document.getElementsByTagName('ol'); // [ol]
console.log(ol[0].getElementsByTagName('li')); //li[0]、li[1]、li[2]、li[3]
// var ol = document.getElementById('ol');//ol
// console.log(ol.getElementsByTagName('li'));//li[0]、li[1]、li[2]、li[3]
</script>
- 注意：父元素必须是单个对象（必须指明是哪一个元素对象），且获取得到的结果不包括父元素自己
3、 通过html5新增的方法获取
3.1 根据类名返回对象集合
document.getElementsByClassName('类名')；//根据类名返回元素对象集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
3.2、根据选择器返回第一个元素对象
document.querySelector(‘选择器’)；//根据指定选择器返回第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
3.3、返回指定选择器的所有元素的对象集合
document.querySelectorAll('选择器')；//根据指定选择器返回所有
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
注意：querySelector和querySelectorAll里面的选择器都需要加上符号，例如#nav、.box等
4、 特殊元素获取
4.1、获取body元素
document.body
var bodyEle = document.body;//返回body元素对象
console.log(bodyEle);
console.dir(bodyEle);
其中log和dir的区别
- console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息
- console.dir()可以显示一个对象所有的属性和方法。
4.2、获取html元素
document.documentElement //返回html元素对象
var htmlEle = document.documentElement;
console.log(htmlEle);
事件基础
1、事件三要素：
- 事件源（谁）
- 事件类型（什么事件）
- 事件处理程序（做啥）
2、执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序 （采取函数赋值形式）
3、常见的鼠标事件
| 鼠标事件 | 触发事件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标交焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
几个基本案例
<body>
<button id="btn">点击我</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('我被选中了');
}
</script>
</body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
操作元素
改变元素的内容
element.innerText
从起始位置到终点位置，但是去除html标签，同时空格和换行也去掉
element.innerHTML
起始位置到终点位置的全部内容，包括html标签，同时保留空格和换行
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);//<strong>今天是：</strong> 2019
console.log(p.innerHTML);//今天是：2019（今天是的字体是加粗的）
</script>
</body>
常用元素的属性操作
1、innerText、innerHTml 改变元素的内容
2、src、href
3、id、alt、title
几个小案例
- 点击不同的按钮显示相应的图片和更换相应title
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>
- 分时问候并显示不同时段的图片
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同问候语，修改元素内容即可
// 1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '亲，上午好，好好写代码';
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '亲，下午好，好好写代码';
} else {
img.src = 'images/w.gif';
div.innerHTML = '亲，晚上好，好好写代码';
}
</script>
</body>
表单元素的属性操作
利用DOM可以操作如下的表单元素：
type、value、checked、select、disabled
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
操作元素总结
节点操作
节点简述
- 获取元素通常使用两种方式：
1、利用Dom提供的方式获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
2、利用节点层级关系获取元素
- 利用父子兄节点获取元素
- 逻辑性强，但兼容性稍差
节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue(节点值)这三个基本属性。
- 元素节点 NodeType为1
- 属性节点NodeType为2
- 文本节点nodeType为3（文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作只要操作的是元素节点
节点层级
- 利用Dom数可以把节点划分为不同的层级关系，常见的是父子兄层级关系
父子节点
node.parentNode
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
子节点
1、parentNode.childNodes（标准）
- parentNode.childNode 返回包含指定的子节点的集合，该集合为即时更新的集合
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
2、 parentNode.childern（非标准）
- parentNode.childern是一个只读属性，返回所有子元素节点。它只返回子元素节点，其余节点不返回（我们经常使用的）
- 虽然childern是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用
3、parentNode.firstChild
-firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有节点
4、parentNode.lastChild
- lastChild返回最后一个子节点，找不到则返回null，同样也是包含所有节点
5、parentNode.firstElementChild
- firstElementChild 返回第一个子元素节点，找不到则返回null
6、parentNode.lastElementChild
- lastElementChild 返回最后一个子元素节点，找不到则返回null。
注意：这两个返回子元素节点的方法有兼容性问题，IE9以上才支持
在实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而firstElementChild 和 lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
- 如果想要第一个子元素节点，可以使用parentNode.children[0]
- 如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length-1]
兄弟节点
node.nextSibling
- nextSibling 返回当前ian元素的下一个兄弟元素节点，找不到则返回null，同样，也是包含所有的节点。
2、node.previousSibling
- previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null，统一，也是包含所有节点。
3、node.nextElementSibling
- nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4、node.previousElementSibling
- previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9以上才支持
创建节点
document.createElement('tagName')
- 创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需要动态生成的，所以也称为创建元素节点。
添加节点
1、node.appendChild(child)
- node.appendChild() 方法将一个节点添加带指定父节点的子节点列表末尾。类似于css里面的after伪元素。
2、node.insertBefoer(child,指定元素)
- node.inserBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于css里面的befoer伪元素。
删除节点
node.removeChild(child)
- node.removeChild() 方法从Dom中删除一个子节点，，返回删除的节点
复制节点
node.cloneNode()
- node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。
注意：
- 1、如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 2、如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的节点
三种动态创建元素区别
- document.write()
- element.innerHTML()
- document.createElement()
区别： - 1、document.write 是直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘
- 2、innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
- 3、innerHtml 创建多个元素效率高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- 4、createElement() 创建多个元素效率稍低一点点，但是结构更清晰
- 总结：不同浏览器下，innerHTML效率要比createElement高
DOM重点核心
- 关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、该、查、属性操作、事件操作。
创建
1、document.write
2、innerHTML
3、createElement
增
1、appendChild
2、insertBefore
删
removeChild
改
主要修改dom的元素属性，dom元素的内容、属性、表单的值等。
1、修改元素属性：src、href、title等
2、修改普通元素内容：innerHTML、innerText
3、修改表单元素：value、type、disabled等
4、修改元素样式：style、className
查
主要获取查询dom的元素
1、Dom提供的API方法：getElementById、getElementsByTagName 古老用法 不推荐
2、H5提供的新方法：querySelector、querySelectorAll 提倡
3、利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡
属性操作
主要针对于自定义属性
1、setAttribute：设置dom的属性值
2、getAttribute：得到dom的属性值
3、removeAttribute移除属性
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
