JavaScript 基础知识 - DOM篇(一)

cuieney 发布于2019-08-22 13:40 / 2280人阅读

摘要：前言本篇文章是基础知识的篇，如果前面的基础知识入门篇看完了，现在就可以学习了。基本概念分为三个部分。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。在对象中的属性是一个布尔值，只有和。

DOM 前言

本篇文章是JavaScript基础知识的DOM篇，如果前面的《JavaScript基础知识-入门篇》看完了，现在就可以学习DOM了。

注意： 所有的案例都在这里链接: 提取密码密码: 9as4，文章中的每个案例后面都有对应的序号。

1. DOM 基本概念

javascript 分为三个部分：ECMAScript、DOM、BOM。想要做出好看的页面效果，就需要学习DOM，学习了DOM之后就可以操作页面元素了。

DOM: 用来操作页面元素的一套工具

BOM: 用来操作浏览器一些行为的一套工具

什么是DOM？

Document Object Model: 文档对象模型，也叫文档树模型，是一套用来操作HTML和XML的一套API

文档对象模型

HTML页面的所有的内容，包括标签、文本、注释、属性等，在JS的DOM中，都存在一个一个的对象与之对应。因此当我们想要操作这些HTML的内容时，只需要操作这些对象即可。

节点：页面中所有的内容，包括标签、文本、注释、属性都被封装成了对象，我们把这些对象叫做节点。

元素：我们最常操作的是标签节点，也叫元素。

文档树模型

HTML结构是一个树形结构，同样的，这些对应的对象也是一个树形的结构，树形结构的好处是能够非常容易找到某个节点的子节点、父节点、兄弟节点。

子节点：child

兄弟节点：sibling

父节点：parent

树形结构示意图：

API

Application Programming Interface：应用程序编程接口，其实就是一大堆的方法，我们可以把API看成是工具。做不同的事情需要不同的工具。

XML

Extensible Markup Language：可扩展性标记语言，通常用于配置文件，或者和json一样用于数据交互。

2. 查找 DOM 对象

想要操作DOM，首先需要获取到DOM对象

2.1 根据id获取元素

document.getElementById("id名");

document : 整个页面就是一个document对象
get      : 获取
Element  : 元素
By       : 通过
Id       : id   参数是一个字符串，即id

返回值   : 是一个元素，即一个对象，标签中存在的属性，在这个元素中也有属与之一一对应。
document指的是整个html页面，在DOM中被封装成了一个对象，就是document对象

示例代码：

举个例子：替换图片的属性 [01-替换图片的属性.html]

效果图：

3.5 表单获得、失去焦点事件

表单获得焦点时触发事件，表单失去焦点时触发事件

1、语法(获得焦点)

事件源.onfocus = function(){
    // 获得焦点后执行的函数
}

2、语法(失去焦点)

事件源.onblur = function(){
    // 失去焦点后执行的函数
}

示例代码：京东搜索案例 [07-京东搜索案例.html]

获得焦点时input输入框清空，失去焦点时恢复提示信息

效果图：

3.6 其他触发事件汇总

在js中触发事件有很多种，这里就不一一列举了，用法和上面的其实是一样的，你只需要知道它的事件名即可。

事件名	事件具体用法	备注
鼠标事件
onclick	鼠标单击时触发的事件
ondblclick	鼠标双击时触发的事件
onmouseover	鼠标移动到某对象范围的上方时触发此事件
onmouseout	鼠标离开某对象范围时触发此事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmousemove	鼠标移动时触发此事件
键盘事件
onkeypress	键盘上的某个键被按下并且释放时触发此事件
onkeydown	键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件
页面相关事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onload	页面内容完成时触发此事件
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onmove	浏览器的窗口被移动时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload	当前页面将被改变时触发此事件
表单相关事件
onfocus	当某个元素获得焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
onsubmit	一个表单被递交时触发此事件
onreset	当表单中RESET的属性被激发时触发此事件
页面编辑事件
onbeforecopy	当页面当前的被选择内容将要[复制]到浏览者系统的剪贴板前触发此事件
onbeforecut	当页面当前的被选择内容将要[剪切]到浏览者系统的剪贴板前触发此事件
onbeforeeditfocus	当前元素将要进入[编辑]状态
onbeforepaste	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate	当浏览者[粘贴]系统剪贴板中的内容时通知目标对象
oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy	当页面当前的被选择内容被[复制]后触发此事件
oncut	当页面当前的被选择内容被剪切时触发此事件
onpaste	当内容被粘贴时触发此事件
onselect	当文本内容被选择时的事件
onselectstart	当文本内容选择将开始发生时触发的事件
ondrag	当某个对象被拖动时触发此事件 [活动事件]
ondragdrop	一个外部对象被鼠标拖进当前窗口或者帧
ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	当某对象将被拖动时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
数据绑定
onafterupdate	当数据完成由数据源到对象的传送时触发此事件
oncellchange	当数据来源发生变化时
ondataavailable	当数据接收完成时触发事件
ondatasetchanged	数据在数据源发生变化时触发的事件
ondatasetcomplete	当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit	当前数据源的数据将要发生变化时触发的事件
onrowsdelete	当前数据记录将被删除时触发此事件
onrowsinserted	当前数据源将要插入新数据记录时触发此事件
外部事件
onafterprint	当文档被打印后触发此事件
onbeforeprint	当文档即将打印时触发此事件
onfilterchange	当某个对象的滤镜效果发生变化时触发的事件
onhelp	当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange	当对象的属性之一发生变化时触发此事件
onreadystatechange	当对象的初始化属性值发生变化时触发此事件

4. 优雅降级和渐进增强

渐进增强：基于所有浏览器完成基本的功能。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。

优雅降级：先基于主流的、高级的浏览器实现功能。对于那些不支持的浏览器，尽量去支持，如果支持不了就放弃。

5. 属性操作 5.1 普通标签属性

在标签中存在的属性，在DOM对象中同样存在着对应的属性，只要修改了标签的属性或者DOM对象的属性，两边都会变化。常见的属性有：title、src、href、className、id等。

属性操作案例：美女相册 [08-美女相册.html]





美女相册案例

效果图：

2、selected：多选菜单的默认显示选择项

当select多选表单里的option选项设置selected="true"的时候，默认显示该选项。

在DOM对象中selected的属性是一个布尔值，只有false和true。

示例代码：点击按钮随机切换option的默认选项 [10-select默认选中项.html]

效果图：

3、checked：选择框的默认选中

当checkbox选择框设置checked选项的时候，默认选中。

在DOM对象中，checked的属性是一个布尔值，只有false和true。

示例代码：表格全选反选案例 [11-表格全选反选.html]

	英雄	技能
	芈月	永生之血
	貂蝉	语·花印
	大乔	川流不息
	甄姬	凝泪成冰

效果图：

5.3 标签自定义属性

之前的属性都是HTML规范中的，标签本来就有的属性，对于标签自定义的一些属性，比较特殊。

在html页面中，定义一个自定义属性"aa"

在对应的DOM对象中是不存在的，在DOM对象中只会存在固有的那些属性

var box = document.getElementById("box");
console.log(box.aa);        // undefined
console.log(box.title);     // "嘻嘻"
console.log(box.id);        // "box"
console.log(box.className); // "cls"

attribute系列

attribute系列方法用于获取、设置移除标签的属性，不管是自定义的还是固有的属性。

1、获取标签的属性 getAttribute

获取标签的属性，不管是固有的还是自定义的，都可以获取得到；

标签里的属性名是什么，获取是的参数就传什么。

2、设置标签的属性 setAttribute

两个参数，分别是：属性名和属性值，都是以字符串传入；

如果标签内有这个属性名，属性值将会被覆盖，如果没有这个属性名，将会被重新设置

3、移除标签的属性 removeAttribute

参数只有一个，就是需要移除的属性名

示例代码：获取当前点击元素的索引 [12-标签自定义属性.html]

通过给当前点击对象添加一个自定义属性

效果图：

5.4 排他思想(tab栏的主要思想)

排他思想可用一句话表述：干掉所有人，复活我自己。下面通过几个小例子，我们学习下排他思想

示例代码：点击按钮使其改变背景，其余的背景不变 [13-点击按钮改变其背景.html]

效果图：

5.5 tab 栏切换

前端的小伙伴们，tab栏的知识点一定要熟练的掌握，因为在网站中会大量的使用到它。

为什么会大量使用tab栏呢？

布局的时候大量的使用div，空间消耗太大

使用tab栏的时候，将不需要显示的div先隐藏，等到点击的时候，再让其显示

示例代码：tab栏切换 [14-tab栏切换.html]

效果图：

6. 标签内容

innerHTML和innerText属性，都是用来获取和设置标签内容的。但是两者还是有区别的。

6.1 innerHTML

innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容。

示例代码：


    哈哈哈

6.2 innerText

innerText可以用于获取和设置标签的文本内容，会丢弃掉标签

示例代码：


    哈哈哈

二者的区别：

innerHTML是W3C的标准属性，而innerText是IE提出来的属性，存在兼容性问题。因此更加推荐大家使用innerHTML。

innerText的作用：防止xss攻击

6.3 innerText 的兼容性问题

浏览器兼容性：指网页在各种浏览器上的显示效果不一致。或者是一些属性和方法在低版本的浏览器中不支持。

具体差别

innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。

火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性

解决浏览器兼容性的处理方式：

能力检测（常用）

代理检测

怪癖检测

书写innerText的兼容性代码：

//获取标签的innerText（兼容所有浏览器）
function getInnerText(element) {
    // 如果支持innerText，说明肯定能获取到内容，是一个字符串
    if (typeof element.innerText == "string") {
        // 兼容IE
        return element.innerText;
    } else {
        // 兼容火狐
        return element.textContent;
    }
}

//设置标签的innerText（兼容所有浏览器）
function setInnerText(element, value) {
    //能力检测
    if (typeof element.innerText == "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

上一篇：JavaScript 基础知识 - 入门篇(二)
下一篇：JavaScript 基础知识 - DOM篇(二)

私有云混合云基础篇之基础篇 java语言程序设计基础篇 javascript dom

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92384.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

Labradors 2019-08-05 15:50 评论0 收藏0
基础巩固：JavaScript基础总结(基本概念篇)

摘要：基础巩固基础总结使用已经好几年了，由于工作主要是做服务端开发，在工作中逐渐发现的使用范围原来越广泛。这里要注意，务必将基础部分掌握牢靠，磨刀不误砍柴功，只有将基础部分掌握并建立起系统的知识体系，在后面学习衍生的其他模式才能游刃有余。基础巩固：JavaScript基础总结使用JavaScript已经好几年了，由于工作主要是做服务端开发，在工作中逐渐发现JavaScript的使用范围原...

YuboonaZhang 2019-08-26 12:08 评论0 收藏0
JS基础篇--JS的DOM操作 - 你真的了解吗?

摘要：摘要想稍微系统的说说对于的操作把和常用操作的内容归纳成思维导图方便阅读同时加入性能上的一些问题前言在前端开发的过程中极为重要的一个功能就是对对象的操作无论增删改查在前端页面操作这一范围内都是比较消耗性能的如何高效率的便捷的操作这就是本文要讲摘要想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题....

DirtyMind 2019-08-22 10:59 评论0 收藏0
JS基础篇--如何用JavaScript判断dom是否有存在某class的值？

摘要：例如判断节点的是否有。的实现方式源码的实现方式源码里面用到了，是的属性，属性返回以数字值返回指定节点的节点类型。如果节点是属性节点，则属性将返回。代码需要了解属性，点击属性文章问题地址例如：判断html节点的class是否有no-js。 1.jquery的实现方式 $(html).hasClass(no-js); jquery源码的实现方式： var rclass = ...

马忠志 2019-08-20 14:17 评论0 收藏0