DOM01
DOM01
- 01-初识DOM
- DOM树
- DOM总结
- 常见元素获取-head,body,html
- 自定义节点获取
- 自定义元素查找
- id方式
- 标签方式
- name方式
- class方式
- 通过css选择查找
- 通过关系查找
- 操作style - 把id='d2'的文字颜色改为红色
- 事件
- 实战练习-点击显示下拉框
- 升级-每个菜单点击后, 都能实现 展开/收起(XXX)
- 操作class
- class实战 - 菜单添加动画
- 页数指示器
- 页数
- 菜单 - 不简化
- 练习
- 作业
DOM:
document object model 文档对象模型
浏览器中输入 window - document 对象
浏览器提供的API:
window.document 对象
网页的HTML代码是如何运行到浏览器上的?
- 浏览器解析HTML文本代码, 转化成 对象类型 –
window.document - 然后 把这个
document对象类型, 渲染到页面上 - 所以: 页面真正显示的是
document这个对象类型 - 利用 document 对象, 就可以直接操作浏览器的界面
01-初识DOM
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>初识DOMtitle>head><body><h1>Hello DOMh1><script>// 浏览器利用 检查->元素 中, 就是document对象 美化之后的样子// log: 会对打印的内容自动美化, 而非原本的模样console.log(document) //document 就是DOM对象// dir: direct 直接, 才能打印出真正样子console.dir(document) //cdi// DOM树: 一个形象的比喻, 讲述的是 HTML 如何转化成DOM对象script>body>
html>DOM树
// DOM树: 一个形象的比喻, 讲述的是 HTML 如何转化成DOM对象
DOM总结
常见元素获取-head,body,html
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>常见元素title>head><body><h1>Hello DOMh1><script>console.log(document.head)console.dir(document.head)console.log(document.body)console.dir(document.body)// html标签console.log(document.documentElement)console.dir(document.documentElement)script>body>
html>自定义节点获取
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自定义节点title>head><body><div>1111div><div>2222div><div>3333div><script>// 查找元素的方式非常多, 选择合适的// 1. 根据与已知元素间的关系查找// 已知 body 节点, 找其第一个子元素// firstChild: 第一个孩子console.log(document.body.firstChild) //基本不用// firstElementChild: 第一个 元素类型 的孩子console.log(document.body.firstElementChild)// 最后一个元素类型的孩子:console.log(document.body.lastElementChild)// 所有孩子console.log(document.body.children)// 获取孩子中的具体某一个, 利用序号console.log(document.body.children[2])// item(序号): 由于比 [序号] 麻烦, 所以大家不爱用console.log(document.body.children.item(2))script>body>
html>自定义元素查找
id方式
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通过id查找title>head><body><div>div><div><div><span id="s1">Hello Worldspan><span>Hello Worldspan>div>div><div>div><script>// 通过id查找指定元素// get:获取 Element:元素 By:通过 Id:唯一标识console.log(document.getElementById('s1'))// 简化操作: id太常用了, 所以系统会自动完成:// var id名 = document.getElementById(id名)console.log(s1)// 不推荐使用, 两个原因:// 1. 读代码时, 会不知道变量哪里来的 -- 团队合作不合适(开发时,代码向下兼容)// 2. 浏览器兼容性, 低版本没有这个自动操作script>body>
html>标签方式
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle>head><body><div><div><span>11span>div><div><span>22span>div>div><script>// 注意: elements 带s 代表复数, 因为同名标签可以有多个// get:获取 Elements:元素们 By: 通过 Tag:标签 Nameconsole.log(document.getElementsByTagName('span'))script>body>
html>name方式
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle>head><body><div><input type="radio" name="sex" id="" /><span>男span><br /><input type="radio" name="sex" id="" /><span>女span>div><script>// 通过 name 属性获取: 名字可重复,所以是多个// elements : s结尾代表复数console.log(document.getElementsByName('sex'))script>body>
html>class方式
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle>head><body><div class="danger">111div><div>222div><div class="danger">333div><script>// 通过 class 名查找console.log(document.getElementsByClassName('danger'))script>body>
html>通过css选择查找
querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）；
2.在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[]。
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>通过css选择器查找title>head><body><div id="left">leftdiv><div id="right">rightdiv><div class="jump"><a href="">百度a>div><script>var div = document.querySelector('div');console.log(div);var div = document.querySelectorAll('div');console.log(div);var d = document.querySelector('.jump>a');console.log(d);script>body>
html>通过关系查找
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>关系型选择器title>head><body><div class="box"><div class="bro"><h1>电影名称h1>div><div class="msg"><h2>这么多年h2><h2>速度与激情10h2>div><h3>花海h3><h3>黑色毛衣h3>div><script>// 父选子var box = document.querySelector('.box');console.log(box.children);// 子选父var msg = document.querySelector('.msg');console.log(msg.parentNode);console.log(msg.parentElement);// 选第一个子元素console.log(msg.firstElementChild);// 选最后一个子元素console.log(msg.lastElementChild);// 选上一个兄弟console.log(msg.previousElementSibling);// 选下一个兄弟console.log(msg.nextElementSibling);script>body>
html>操作style - 把id='d2’的文字颜色改为红色
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle>head><body><div>div><div><div>1111div><div id="d2">2222div><div>3333div>div><div>div><script>// 1.找到id='d2' 的元素let d2 = document.getElementById('d2')console.log(d2)console.dir(d2)// 2.修改其样式, 变红d2.style.color = 'red'//给每一个子元素添加边框// parent: 父母let d2_p = d2.parentElementconsole.log(d2_p)// children: 所有子元素let divs = d2_p.childrenconsole.log(divs)// 伪数组类型, 没有forEach方法, 用 for..of遍历for (let el of divs) {// el: 是element 元素的缩写, 可以随意起名el.style.border = '1px solid blue'}script>body>
html>事件
所有的DOM事件参考: 所有DOM事件链接
https://www.runoob.com/jsref/dom-obj-event.html
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件title>head><body><div><button>点我button>div><script>// 注意: 伪数组元素 , 要通过 `序号` 来获取具体的元素let btn = document.getElementsByTagName('button')[0]console.log(btn)// 所有的事件都是用 on 开头的, 这是一个明显的标识// HTML DOM事件: https://www.runoob.com/jsref/dom-obj-event.htmlconsole.dir(btn)// onclick: 点击// onclick时 触发函数, 不应该写箭头函数, 因为this的指向问题// 箭头函数this: 指向声明时所在作用域,此处是window// 普通函数: 运行时所在对象, 此处是btnbtn.onclick = function () {console.log('this:', this)// 点击后 为按钮的父元素添加边框this.parentElement.style.border = '1px solid red'}script>body>
html>实战练习-点击显示下拉框
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>.menu {padding: 4px;background-color: antiquewhite;width: 200px;/* 双击选中文本: 不开启此功能 */user-select: none;}/* +: 兄弟选择器, 代表 .menu 下方的div */.menu + div {display: none;}style>head><body><div><div class="menu">菜单div><div><div>黄焖鸡div><div>盖浇饭div><div>鸭血粉丝汤div><div>肯德基div>div>div><script>// 1. 选择 class='menu' 的元素let menu = document.getElementsByClassName('menu')[0]console.dir(menu)// 2. 添加点击事件menu.onclick = function () {// 3. 点击后,把其下方的兄弟元素, display:'block'// next:下一个 Element:元素 Sibling:兄弟姐妹// style: 优先级比 class选择器高, 所以覆盖class中的 display:none 效果//this.nextElementSibling.style = 'block'let style = this.nextElementSibling.style// style:是对象类型, 地址传递, 引用类型// 内联样式: 默认值是空字符串if (style.display == '') {style.display = 'block'} else {style.display = ''}// 错误写法: display是普通数据类型 ''// 类似于: let a = 5; let b = a; b=10; a变不变// a不变: 普通数据类型是值传递, 是独立的变量// let display = this.nextElementSibling.style.display// display = ''}script>body>
html>升级-每个菜单点击后, 都能实现 展开/收起(XXX)
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>.menu {margin-top: 2px;padding: 4px;background-color: antiquewhite;width: 200px;/* 双击选中文本: 不开启此功能 */user-select: none;}/* +: 兄弟选择器, 代表 .menu 下方的div */.menu + div {display: none;}style>head><body><div><div class="menu">菜单1div><div><div>黄焖鸡div><div>盖浇饭div><div>鸭血粉丝汤div><div>肯德基div>div><div class="menu">菜单2div><div><div>黄焖鸡div><div>盖浇饭div><div>鸭血粉丝汤div><div>肯德基div>div><div class="menu">菜单3div><div><div>黄焖鸡div><div>盖浇饭div><div>鸭血粉丝汤div><div>肯德基div>div>div><script>// 任务: 每个菜单点击后, 都能实现 展开/收起// 提示: 查询所有 class='menu', for..of 遍历为每个添加点击事件 即可let menus = document.getElementsByClassName('menu')console.log(menus)for (let menu of menus) {menu.onclick = function () {let style = this.nextElementSibling.style// 空字符串代表: 没有 style.display 样式style.display = style.display == '' ? 'block' : ''}}script>body>
html>操作class
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>操作classtitle><style>.box {width: 200px;height: 200px;border: 1px solid red;/* 样式变化时的动画时长 */transition: 0.25s;}/* 一会通过按钮进行切换 */.abc {background-color: purple;border-radius: 50%;}style>head><body><button>添加样式button><button>移除样式button><button>切换样式button><div id="box" class="box ab xy ui ww">div><script>let btns = document.getElementsByTagName('button')console.log(btns)let box = document.getElementById('box')//添加btns[0].onclick = function () {//样式操作有两种: className 和 classList// className: 此方式直接操作class='' 的值, 比较简陋// box.className = 'box abc'// classList: 提供了简单操作class的各种方法// add(): 在原有元素基础上, 添加新的box.classList.add('abc')}//移除btns[1].onclick = function () {// remove: 删除box.classList.remove('abc')}//切换btns[2].onclick = function () {// toggle: 切换 -- 有->删; 没有->加box.classList.toggle('abc')}script>body>
html>class实战 - 菜单添加动画
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>#menu {width: 200px;border: 1px solid gray;}.title {background-color: bisque;padding: 5px;margin-top: 2px;}.title + div {transition: 1s;/* 最大高度: 支持动画, height:auto;不支持 */max-height: 0;overflow: hidden;}/* 显示: 高度改成自动 *//* div.show: div标签 同时代表 show样式 */div.show {max-height: 150px;}style>head><body><div id="menu"><div class="title">菜单1div><div><div>红烧牛肉div><div>老坛酸菜div><div>鲜虾鱼板div><div>香辣牛肉div>div><div class="title">菜单2div><div><div>红烧牛肉div><div>老坛酸菜div><div>鲜虾鱼板div><div>香辣牛肉div>div>div><script>// 选择 class='title' 元素let titles = document.getElementsByClassName('title')console.log(titles)for (let title of titles) {title.onclick = function () {// toggle: 切换// nextElementSibling: 下一个兄弟元素this.nextElementSibling.classList.toggle('show')}}// 点击事件: 切换 class='show' 样式script>body>
html>页数指示器
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>.indicator {width: 400px;padding: 5px 0;text-align: center;background-color: lightgray;}.indicator > span {display: inline-block;width: 16px;height: 16px;background-color: white;border-radius: 50%;}.indicator > span.cur {background-color: deepskyblue;}style>head><body><div class="indicator"><span class="cur">span><span>span><span>span><span>span>div><script>// 所有 小圆点: class='indicator' 元素下的所有子元素// let points = document.getElementsByClassName('indicator')[0].children// 实战中: 通常使用 css 选择器, 最万能 最准确// querySelectorAll: all 查询多个满足条件的let points = document.querySelectorAll('.indicator>span')// 这种用法: 结果的原型中, 有forEach可以用points.forEach(value => {// onmouseover: 鼠标悬浮时触发value.onmouseover = function () {// 找到之前带有 .cur 样式的元素, 删除样式// 通过css选择器查找元素, 必须要预判结果的数量// 此处预判到结果只有一个, 所以:// querySelector: 结果是单个元素let span_cur = document.querySelector('.cur')console.log('span_cur:', span_cur)span_cur.classList.remove('cur')console.log(this)// 鼠标悬浮时, 添加 cur 样式this.classList.add('cur')}})console.log(points)script>body>
html>页数
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>.pages {background-color: lightgray;padding: 5px;width: 400px;text-align: center;user-select: none;}.pages > span {display: inline-block;width: 30px;height: 30px;line-height: 30px;background-color: white;color: deepskyblue;border-radius: 4px;}.pages > span:hover,.pages > span.cur {color: white;background-color: deepskyblue;}style>head><body><div class="pages"><span class="cur">1span><span>2span><span>3span><span>4span><span>5span>div><script>// document.querySelector 查单个// document.querySelectorAll 查多个, forEach遍历let spans = document.querySelectorAll('.pages>span')console.log(spans)spans.forEach(span => {// 参数名:span, 看起来更加容易理解, 比value更有含义span.onclick = function () {// 移除之前高亮元素的 curlet span_cur = document.querySelector('.pages .cur')span_cur.classList.remove('cur')// 为当前点击的添加curthis.classList.add('cur')}})script>body>
html>菜单 - 不简化
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>#menu {/* 软件: snipaste 截图 屏幕标记 取色器 */background-color: rgb(0, 44, 105);color: white;user-select: none;}#menu > span {display: inline-block;width: 100px;padding: 5px 0;text-align: center;}#menu > span.cur {background-color: orange;}style>head><body><div id="menu"><span class="cur">首页span><span>关于净美仕span><span>公司动态span><span>产品中心span><span>联系我们span>div><script>const qsa = document.querySelectorAll('#menu>span')console.log(qsa);// 推荐用const 代替 let , 因为更安全, 变量没有变更需求的场景qsa.forEach(value => {value.onclick = function () {//删除之前高亮的const qs = document.querySelector('#menu .cur')qs.classList.remove('cur')this.classList.add('cur')}})script>body>
html>
练习
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><style>#menu {user-select: none;}#menu > span {display: inline-block;padding-bottom: 5px;margin: 0 10px;color: gray;font-size: 2em;}#menu > .cur {font-weight: bold;color: black;border-bottom: 5px solid blue;}style>head><body><div id="menu"><span class="cur">账号登录span><span>短信登录span>div><script>const qsa = document.querySelectorAll('#menu span')qsa.forEach(value => {value.onclick = function () {const qs = document.querySelector('#menu .cur')qs.classList.remove('cur')this.classList.add('cur')}})script>body>
html>作业
作业1:
- 悬浮状态
:hover, 只有非 当前项才有, 应该利用:not排除当前项span:not(.cur):hover: span标签中, 不是.cur样式的元素,悬浮态
作业2:
标签栏切换的头部: 点击之后的项目是白色背景
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！