js下 Day02、DOM文档对象模型
一.DOM简介
Document Object Model 文档对象模型
DOM包含了所有HTML元素的属性和方法,以及访问他们的方式;
#二.DOM节点
#1. 什么是节点?
HTML中所有的元素都是一个节点
整个文档是文档节点
所有的标签都是元素节点
标签内的属性是属性节点
标签内的文本是文本
#2. 节点属性
Ele.nodeName | Ele.nodeType | Ele.nodeValue | |
---|---|---|---|
元素节点 | 大写的标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
注释节点 | #comment | 8 | 注释内容 |
文档节点 | #document | 9 | null |
***\ ** ** 元素的tagName等价于nodeName
#3. 节点关系
会识别空白文本(不常用)
元素.firstChild 第一个子节点
元素.lastChild 最后一个子节点
元素.childNodes 获取所有的子节点
元素.attributes 获取某个元素的所有属性节点
元素.nextSibling 获取下一个兄弟节点
元素.previousSibling 获取上一个兄弟节点
不识别空白文本
元素.children 获取所有的元素子节点
元素.firstElementChild 获取第一个元素子节点
元素.lastElementChild 获取最后一个元素子节点
元素.nextElementSibling 获取下一个元素兄弟节点
元素.previousElementSibling 获取上一个元素兄弟节点
元素.parentNode 父节点
#三.查找元素
语法:元素.getElementById(“id”)
功能:通过id名查找元素
返回值:DOM对象
语法:元素.getElementsByTagName(“tag”)
功能:通过标签名查找元素
返回值:类数组
语法:元素.getElementsByClassName(“class”)
功能:通过class名查找元素
返回值:类数组
语法:元素.querySelector("css选择器");
功能:根据css选择器查找,只找一个
返回值:DOM对象
语法:元素.querySelectorAll("css选择器");
功能:根据css选择器查找,找所有
返回值:类数组
类数组转数组:
**[... ** 类数组];
Array.from(类数组);
#四.元素类名
classList: 所有类名组成的类数组
classList.add() 添加类名
classList.remove() 删除类名
classList.contains() 检测类名是否存在,返回布尔值
classList.toggle() 类名存在则删除,类名不存在则添加
#五.课堂案例
#1. 选中高亮
效果图
功能思路分析:
\1. 给每一个li绑定点击事件(forEach)
\2. 点击事件中,利用排他思想,先去掉所有标签的类名
\3. 再给当前标签加上类名
#2.手风琴
效果图:
功能思路分析:
\1. 给每一个li绑定点击事件(forEach)
\2. 点击事件中,利用排他思想,先去掉所有标签的类名
\3. 再给当前标签加上类名
#3.选项卡
效果图
功能思路分析:
\1. 淡入淡出效果需要先将所有的图片定位在一起,修改他们的透明度(opacity)
\2. 给每一个导航信息绑定点击事件
\3. 点击事件中,利用排他思想去掉所有的类名,并找到对应下标的图片去掉类名
\4. 给点击的元素加上类名,并找到对应下标的图片加上类名(classList.add)
#六.今日小结
1.节点关系: firstElementChild lastElementChild
previousElementSibling nextElementSibling
children parentNode
2.查找元素: document.querySelector( ‘css选择器’)
document.querySelector( ‘css选择器’)
3.类名操作: classList.add() classList.remove()
classList.contains() classList.toggle()
#七.作业 -- 轮播图
将案例3选项卡改编成轮播图效果
\1. 加上定时器(setInterval)自动轮播
\2. 添加左右箭头,上一页下一页切换
js下 Day02、DOM文档对象模型的更多相关文章
- JS第二部分--DOM文档对象模型
一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- DOM 文档对象模型
document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...
- JavaScript学习总结(一)DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- DOM文档对象模型
随机推荐
- mysql密码问题
这位老哥的: 版权声明:本文为CSDN博主「csdn-华仔」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/ ...
- .net core quartz job作业调度管理组件
定时作业对于多数系统来说,都会用到,定时作业的实现方式可以有多种方式,简单的方式用Timer就可以实现,但是达不到通用的效果,本文采用Quartz基础组件来搭建一套企业通用的作业调度管理服务,希望对于 ...
- 思维导图软件MindManager的视图介绍
MindManager思维导图软件提供了多种视图帮助用户更好边界组织思维导图,包括导图视图.大纲视图.甘特图.链接的视图等等,下面将逐一介绍MindManager视图模式及其作用. 打开软件视图功能区 ...
- ClassLoader分类
对于类装载器而言一共有三种, 1分别是加载rt包下的Bootstrap加载器,是用C++写的,是在java最早发布的时候写的,用于加载那些最初的类. 2然后java在发展过程中又要发布新的jdk,所以 ...
- hashmap(有空可以看看算法这本书中对于这部分的实现,很有道理)
//转载:https://baijiahao.baidu.com/s?id=1618550070727689060&wfr=spider&for=pc 1.为什么用HashMap? H ...
- JS&Swift相互交互
加载本地HTML文件 x override func loadView() { super.loadView() let conf = WKWebViewCon ...
- python selenium 时间搜索框查询和日期大小比较
在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...
- 基于CefSharp开发(二)自定义浏览器窗体
上一篇 https://www.cnblogs.com/mchao/p/13914726.html 简单了解了CefSharp引用配置但页面光秃秃的,这一篇着手开发简单浏览器窗体 一.Edge浏览器窗 ...
- MySQL——一致性非锁定读(快照读)&MVCC
MySQL--一致性非锁定读(快照读) MySQL数据库中读分为一致性非锁定读.一致性锁定读 一致性非锁定读(快照读),普通的SELECT,通过多版本并发控制(MVCC)实现. 一致性锁定读(当前读) ...
- 第6章 Python中的动态可执行方法 第6.1节 Python代码编译
在介绍动态可执行方法前,本节先介绍一下Python代码编译有关的知识,因为部分内容和动态执行有些关联. 一. Python解释器的功能 Python虽然是解释型语言,但Python代码也是可编译 ...