国外的设计网站app,seo网络推广公司,为什么做网站能赚钱,网站建设 主要内容一、Dom获取属性操作
#xff08;一#xff09;、 Web API 基本认知
1、变量声明
const 声明的值不能更改#xff0c;而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型#xff0c;const声明的变量#xff0c;里面存的不是 值#xff0c;是 地址…一、Dom获取属性操作
一、 Web API 基本认知
1、变量声明
const 声明的值不能更改而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型const声明的变量里面存的不是 值是 地址。
有了变量先给const如果发现它后面是要被修改的再改为let
const中数组和对象里面可以修改因为栈没改变地址
2、作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类DOM (文档对象模型)、BOM浏览器对象模型
3、什么是DOM
DOM 是文档对象模型
作用操作网页内容可以开发网页内容特效和实现用户交 互
4、DOM树
将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树
作用文档树直观的体现了标签与标签之间的关系
5、DOM对象 DOM对象浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上 DOM的核心思想 把网页内容当做对象来处理 document 对象 是 DOM 里提供的一个对象 它提供的属性和方法都是用来访问和操作网页内容的
二、获取DOM对象
1、 根据CSS选择器来获取DOM元素 (重点)
1选择匹配的第一个元素
语法document.querySelector()
2.参数: 包含一个或多个有效的CSS选择器 字符串
3.返回值 CSS选择器匹配的第一个元素,一个 HTMLElement对象。
4.如果没有匹配到则返回null。
实例 html langen
style.box {width: 200px;height: 100px;background-color: aqua;}
/style
bodyp idnav首页/pdiv classbox 123/divscript//1、标签名获取console.log(document.querySelector(div));//2、类选择器获取console.log(document.querySelector(.box));//console.dir() 打印元素对象的属性和方法console.dir(document.querySelector(div))//3、ID选择器获取console.log(document.querySelector(#nav));//4、获取第一个对象console.log(document.querySelector(ul li:first-child));//获取第一个小li/script
/body
/html
2选择匹配的多个元素
语法
document.querySelectorAll()
参数: 包含一个或多个有效的CSS选择器 字符串
返回值 CSS选择器匹配的NodeList 对象集合
例如
document.querySelectorAll(ul li)
document.querySelectorAll()得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象则需要遍历for的方式获得。
实例
//5、获取全部的小li divconsole.log(document.querySelectorAll(div));//[div.box, div.box, div.box]let s document.querySelectorAll(div)
//6、遍历 for循环for (let i 0; i s.length; i) {console.log(s[i]);//数组类型的打印console.dir(s[i]);//对象的形式打印}
3 他们两者小括号里面的参数注意事项
** 里面写css选择器 **
** 必须是字符串也就是必须加引号**
2、其他获取DOM元素方法了解 //1、根据id获取一个元素console.log(document.getElementById(nav));//2、根据 标签获取一类元素 获取页面 所有divconsole.log(document.getElementsByTagName(div));//[div.box, div.box, div.box]//3、根据 类名获取元素 获取页面 所有类名为 box的console.log(document.getElementsByClassName(box));//[div.box, div.box, div.box]
三、操作元素内容
1、元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本不解析标签
实例
p classinfo你好js/pscript//获取标签内部的文字const info document.querySelector(.info)//添加/修改标签内部文字内容info.innerTest hello//对p内容进行了更新页面上只显示hello/script
2、元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签多标签建议使用模板字符
p classinfo你好js/pscript//获取标签内部的文字const info document.querySelector(.info)//添加/修改标签内部文字内容info.innerHTML stronghellostrong//对p内容进行了更新页面上只显示hello/script
四、操作元素属性
1、操作元素常用属性
语法
对象.属性 值
实例
bodyimg src./01.jpg altscript//1、获取元素const img document.querySelector(img)//2、操作元素img.src ./02.jpg//更换了图片/script
/body
2、操作元素样式属性
1、通过 style 属性操作CSS
语法对象.style.样式属性 值
实例
style.box {width: 200px;height: 200px;background-color: pink;}/style
/head
bodydiv classbox/divscript// 1. 获取元素const box document.querySelector(.box)//2. 修改样式属性 对象.style.样式属性 值 别忘了跟单位box.style.width 300px// 多组单词的采取 小驼峰命名法box.style.backgroundColor hotpinkbox.style.border 2px solid bluebox.style.borderTop 2px solid red/script
/body
注意 修改样式通过style属性引出 如果属性有-连接符需要转换为小驼峰命名法 赋值的时候需要的时候不要忘记加css单位
2、操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。
语法元素.calssName 类名
实例
stylediv {width: 200px;height: 200px;background-color: pink;} .box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: 1px solid #000;}
/style
bodydiv/divscript//1、获取元素const div document.querySelector(div)//2、添加类名 class 是关键字我们用classNamediv.className box/script
/body
注意 由于class是关键字, 所以使用className去代替 className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类
div.className nav box//box将nav覆盖了
3、通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名
方法名方法作用追加类元素.classList.add(类名)追加一个类(类名不加点并且是字符串)删除类元素.classList.remove(类名)删除一个类(类名不加点并且是字符串)切换类元素.classList.toggle(类名)对所定的元素进行查询有就删掉;没有就加上
3、 操作 表单元素 属性
1获取表单里面的值与修改
innerHTML不能修改表单元素
bodyinput typetext value请输入姓名script//1、获取标签对象const input document.querySelector(input)//2、获取值console.log(input.value);//3、修改input.value sef//修改值input.type password //变成密码隐藏了/script
/body
2按钮是否选中checked
bodyinput typecheckbox name idboxscriptlet box document.querySelector(#box) //利用id选择器获取标签box.checked true; //也可以带引号‘true’但是不提倡/script
/body
3按钮是否禁用disabled
bodybutton onclick点击/buttonscriptlet button document.querySelector(button)button.disabled true;//按钮禁用 false不禁用/script
/body
4、点击后显示的内容
bodybutton onclick printHello()点击/buttonscriptfunction printHello() {//点击访问alert(hello)}//使用此函数的同时上面的onclick要引用函数/script
/body
4、自定义属性 语法的data-自定义属性 在标签上一律以data-开头 在DOM对象上一律以dataset对象方式获取 实例 bodydiv data-id1 data-spm不知道1/divdiv data-id22/divdiv data-id33/divdiv data-id44/divdiv data-id55/divscriptconst one document.querySelector(div)console.log(one.dataset.id) // 1 dataset相当于对象console.log(one.dataset.spm) // 不知道 对象.元素 取值/script
/body
五、定时器-间歇函数
能够使用定时器函数重复执行代码
1、开启定时器
setInterval(函数间隔时间) //间隔时间单位是毫秒
作用每隔一段时间调用这个函数
注意 函数名字不需要加括号 定时器返回的是一个id数字
例如
script//方式一function re() {console.log(前端程序员);}//每隔一秒调用函数setInterval(re, 1000) //注意此处函数不能加括号//方式二使用匿名函数setInterval(function () { console.log(hello) }, 1000)let num setInterval(re, 1000)console.log(num);//定时器返回的是id数字/script
2、关闭定时器
语法
let 变量名 setInterval(函数, 间隔时间) clearInterval(变量名)
四、Dom节点移动端滑动
一日期对象 二节点操作
1、DOM 节点
DOM树里每一个内容都称之为节点
DOM节点的分类 元素节点 比如 div标签 属性节点 比如 class属性 文本节点 比如标签里面的文字
2、查找节点
1父节点查找 parentNode 返回最近一级的父节点 找不到返回为null 语法 子元素.parentNode 实例
body
div classyeyediv classdaddiv classbaby/div/div
/divscriptlet baby document.querySelector(.baby)console.log(baby.parentNode);//拿到dad bady的父级元素console.log(baby.parentNode.parentNode);//拿到yeye bady父级的父级元素
/script
/body 2子节点查找childNodes
获得所有子节点、包括文本节点空格、换行、注释节点等
children 属性 重点 仅获得所有元素节点 返回的还是一个伪数组 语法父元素.children 实例
body
ulli1/lili2/lili3/lili4/lili5/li
/ul
scriptlet ul document.querySelector(ul)console.log(ul.children);//得到伪数组 存在五个小li对象console.log(ul.children[1]);//得到第二个元素对象li/script
/body
3、兄弟关系查找 下一个兄弟节点 nextElementSibling 属性 上一个兄弟节点 previousElementSibling 属性 实例
body
ulli1/lili2/lili3/lili4/lili5/li
/ul
scriptlet li document.querySelector(ul li:nth-child(3)) /选择第三个小liconsole.log(li);//第三个小li的上一个兄弟console.log(li.previousElementSibling);//第三个小li的下一个兄弟console.log(li.nextElementSibling);
/script
/body
3、增加节点
1、创建节点
即创造出一个新的网页元素再添加到网页内一般先创建节点然后插入节点
语法
//创建一个心得元素节点document.createElement(标签名)
2、追加节点 插入到父元素的最后一个子元素 语法
父元素.appendChild要插入的元素 插入到父元素中某个子元素的前面
语法
父元素.insertBefore要插入的元素放在那个元素前面//查找要插入的元素位置 使用父元素.children[下标] 进行查找
3增加节点实例
body
ulli我是老大/li
/ul
script//1、创建一个新节点let li document.createElement(li)li.innerHTML 我是老二//修改值//2、追加节点//2.1、获取ullet uldocument.querySelector(ul)//2.2、插入到末尾//ul.appendChild(li)///2.3、插入到某一个元素前面insertBefore要插入的元素放在那个元素前面ul.insertBefore(li,ul.children[0])//ul.children[0]查子元素的第一个元素
/script
/body
4、克隆节点 复制一个原有的节点 把复制的节点放入到指定的元素内部 语法
//克隆一个已有的元素节点
元素.cloneNode(布尔值)
注意 cloneNode会克隆出一个跟原标签一样的元素括号内传入布尔值 若为true则代表克隆时会包含后代节点一起克隆 若为false则代表克隆时不包含后代节点 默认为fals
实例
bodyulli1/lili2/lili3/li/ul
script//1、获取到父节点let ul document.querySelector(ul)//ul.children[0]//ul中的第一个元素let li ul.children[0].cloneNode(true)//追加元素 不带true的话只复制标签而没有里面的值ul.appendChild(li)/script
/body
4、删除节点 若一个节点在页面中已不需要时可以删除它 在 JavaScript 原生DOM操作中要删除元素必须通过父元素删除 语法
父元素.removeChild(要删除的元素
父元素.remove() //删除全部元素 注 如不存在父子关系则删除不成功 删除节点和隐藏节点display:none 有区别的 隐藏节点还是存在的但是删除则从html中删除节点
