JavaScript-DOM（BOM）操作

核心知识

获取页面元素
事件
设置样式

学习目标

能够使用id名,标签名等方式获取页面中元素
能够给标签注册点击事件,并实现对应效果
能够给标签通过js方式设置样式

JavaScript组成

ECMASCRIPT (基础语法)

DOM（文档对象模型）

BOM（浏览器对象模型）

DOM+BOM

为啥要学DOM和BOM?

总结： 通过js中的DOM和BOM操作实现页面中的一些用户点击效果等
注意：不要盲目的认为JS就是用来做网页特效的。

到底什么是DOM和BOM？

DOM： Document Object Model (文档对象模型)    操作页面元素
BOM： Browser Object Model (浏览器器对象模型)  操作浏览器

什么是文档对象模型（DOM）？

概念部分理解

文档：HTML文件（document）
对象：对具体事务的抽象【属性+值】，将HTML抽象成对象总结：通过js操作html文档中的标签

文档树

将html文件中的标签，属性 等转化为对象，按照标签的关系以树状结构保存到内存中☞ 文档树中的元素: HTML标签 + 属性 + 内容信息 ☞ 文档树中的节点： 所有的内容都叫节点（文本节点，标签节点，属性节点）

如何学习DOM和BOM？

掌握大量的方法（api），属性。

什么是API?

是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力例如:
Math.max() ...

3.获取页面中的元素

document.getElementById（元素ID）
document.getElementsByTagName（标签名）
document.querySelector（css选择器）
document.querySelectorAll（css选择器）

课堂练习

1. 在如下代码结构中将第一个列表中所有的文字输出到控制台中
2. 在如下代码结构中将第二个列表中第3个li标签输出到控制台中

4.事件

什么是事件？

事件指的是一种行为动作： 比如 单击，双击，手指按压，滑动，移动，悬停。。。

事件三要素

        事件源： 页面中的一个具体的标签事件类型： 行为动作（单击，双击，悬停，滑动。。。） 事件处理程序： 事件发生后的一个结果

事件语法

  事件源.事件类型 = 事件处理程序注意：事件处理程序的本质就是一个函数。

事件类型：

单击onclick
双击ondblclick

事件处理程序中的this关键字

 函数中的this指向的是外部构造函数指向的对象。事件处理程序中的this指向的是当前事件源

5.操作元素中的属性

src属性【案例:换图片】

dom.src :  获取图片路径    ----> 绝对路径
dom.alt:   获取图片描述信息备注：dom 指的是通过js获取的页面中元素

className【案例：动画效果】

//获取对象的类名
dom.className//给对象添加类名
dom.className = '类名'注意：
1.通过className给元素添加类名会将原来的类名覆盖掉
2.如果要保证原来的类名依然存在，可以使用拼接字符串的方式
3.去掉类名，赋值为空字符串即可

innerText 和 innerHTML【案例：设置文字】

//获取方式
通过innerText获取,仅仅包含文本
通过innerHTML获取，若有子标签时，会包含文本和子标签备注：1. 在老版本火狐浏览器中不支持innerText2. 在老版本火狐浏览器中使用textContent设置获取标签内容信息3. 2016年将innerText正式纳入标准属性//设置结果
通过innerText设置,若设置中包含了子标签，该标签不会被渲染而是当做普通文本显示
通过innerHTML设置,若设置中包含了子标签，该标签会被渲染显示

textContent和 innerText

相同点：相同点：获取的都是文本，将html标签过滤掉不同点：
textContent在获取内容的时候，将空格和换行效果都显示
innerText 在获取内容的时候，没有空格和换行效果处理兼容性问题：
1.如果元素支持某个属性，那么会返回该属性的类型
2.如果元素不支持某个属性，那么会返回undefined类型
例如：<div id="one"></div>console.log(typeof div.a);  //undefinedconsole.log(typeof div.id); //string

取消a标签默认跳转行为[扩展]

方式1：事件处理程序中最后设置return false; <a id="link" href="https://www.baidu.com">点击</a>
<script>
var link = document.getElementById('link');
link.onclick = function(){alert('你好');
// 方式1：取消a点击后的默认跳转行为 return false;
return false;
};
</script>方式2：设置a标签的href属性值为：javascript:
<a href="javascript:">点击2</a>
备注：给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码

1：取消a点击后的默认跳转行为 return false;

return false;
};

方式2：设置a标签的href属性值为：javascript:
点击2
备注：
给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码

js(Dom+Bom)第一天（1）相关推荐

js(Dom+Bom)第一天（2）
webAPI 00-复习内置对象中的方法 01-JavaScript组成知识点-ECMASCRIPT 重点回顾存储容器变量数组对象逻辑语法分支语句循环语句 switch语句知识点- ...
js(Dom+Bom)第六天（1）
webAPI 01-键盘事件知识点-onkeydown事件[掌握] onkeydown: 当键盘上的键被按下时候触发的一个事件知识点-onkeyup事件[掌握] onkeyup: 键盘上键弹起时候 ...
js(Dom+Bom)第七天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第五天（2）
webAPI 01-事件监听为什么要学事件监听之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉. 知识点-通过 ...
js(Dom+Bom)第五天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第四天（1）
webAPI 1-通过DOM节点方式获取元素 1-0注意事项下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容 1-1与父节点相关的操作方式 1-1-1.知识点-判断父 ...
js(Dom+Bom)第三天（2）
webAPI 0-操作标签属性系统属性作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....) 2. 还可以操作用户自定义的属性 dom.getAtt ...
js(Dom+Bom)第三天（1）
JavaScript-DOM 节点的层次结构 hasChildNodes() [父元素中是否包含子节点] dom.hasChildNodes() 总结:1.该方法返回的是一个布尔类型的结果用来判断当前 ...
js(Dom+Bom)第二天（1）
JavaScript-DOM操作核心知识点 className操作标签样式 style属性方式操作标签样式操作表单控件学习目标能够通过className方式给标签设置样式能够通过style方 ...

js(Dom+Bom)第一天（1）

JavaScript-DOM（BOM）操作

核心知识

学习目标

JavaScript组成

ECMASCRIPT (基础语法)

DOM（文档对象模型）

BOM（浏览器对象模型）

DOM+BOM

为啥要学DOM和BOM?

到底什么是DOM和BOM？

什么是文档对象模型（DOM）？

概念部分理解

文档树

如何学习DOM和BOM？

3.获取页面中的元素

document.getElementById（元素ID）

document.getElementsByTagName（标签名）

document.querySelector（css选择器）

document.querySelectorAll（css选择器）

课堂练习

4.事件

什么是事件？

事件三要素

事件语法

事件类型：

事件处理程序中的this关键字

5.操作元素中的属性

src属性【案例:换图片】

className【案例：动画效果】

innerText 和 innerHTML【案例：设置文字】

textContent和 innerText

取消a标签默认跳转行为[扩展]

js(Dom+Bom)第一天（1）相关推荐

最新文章

热门文章