0
点赞
收藏
分享

微信扫一扫

js复习-day5

Yaphets_巍 2022-04-18 阅读 55
javascript

目录

浏览器地址栏

href

reload( )

浏览器历史记录

历史回退

历史前进

历史跳转

浏览器的标签页

新开标签页

关闭当前标签页

浏览器的常见事件

onload

onresize

onscroll

浏览器卷去的尺寸

卷去的高度

卷去的宽度

浏览器滚动到

scrollTo()

认识 DOM

获取元素

id 直接使用

html, head, body(非常规标签)

根据 id 获取元素

根据类名获取

根据标签名获取

根据 name 属性来获取

根据选择器获取一个元素

根据选择器获取一组元素

操作元素内容

innerText

innerHTML

value

模板字符串

操作原生属性

操作自定义属性

操作H5自定义属性

操作元素样式

设置元素的行内样式

获取元素的行内样式(只能获取到行内样式)

获取元素非行内样式(可以获取行内样式也可以获取非行内样式)

操作元素类名

className

classList

获取元素尺寸

offsetWidth 和 offsetHeight

clientWidth 和 clientHeight

获取元素偏移量

offsetLeft 和 offsetTop

获取窗口尺寸

DOM 级别获取

DOM 节点的操作

获取节点

childNodes

children

firstChild

firstElementChild

lastChild

lastElementChild

previousSibling

previousElementSibling

nextSibling

nextElementSibling

parentNode

parentElement

attributes


浏览器地址栏

在 window 下有一个成员叫做 location 里面存储的都是和地址栏相关的内容;

  • href

window.location.href
// 当前页面的地址栏完整信息
window.location.href = '地址'
// 把当前地址栏的地址修改
  • reload( )

window.location.reload()
// 把当前页面重新加载一遍

浏览器历史记录

window 下有一个成员 叫做 history,里面存储的都是和历史记录相关的信息;

  • 历史回退

window.history.back()
// 回到上一个历史页面
// 前提是从上一个跳转过来
  • 历史前进

window.history.forward()
// 去到下一个页面
// 前提是从前一个回退回来后
  • 历史跳转

window.history.go(数字)
// 正整数 => 历史前进
// 0 => 重新打开当前页面
// 负整数 => 历史回退

浏览器的标签页

  • 新开标签页

window.open('地址')
// 新开标签页,打开地址
  • 关闭当前标签页

window.close()
// 关闭当前标签页

浏览器的常见事件

  • onload

window.onload = function () {}
// 当 js 代码书写在 head 内,还需操作页面元素的时候,需要写一个 window.onload 事件
  • onresize

window.onresize = function () {}
// 当页面可视窗口尺寸改变的时候触发
  • onscroll

window.onscroll = function () {}
// 当浏览器的滚动条滚动的时候触发

浏览器卷去的尺寸

  • 卷去的高度

document.documentElement.scrollTop
// 当页面有 DOCUTYPE 标签的时候使用
document.body.scrollTop
// 当页面没有 DOCUTYPE 标签的时候使用
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 短路表达式 兼容
  • 卷去的宽度

document.documenElement.scrollLeft
// 当页面有 DOCTYPE 标签的时候使用
document.body.scrollLeft
// 当页面没有 DOCTYPE 标签的时候使用

浏览器滚动到

  • scrollTo()

// 1. 传递数字,必须是两个参数;x 设置卷去的宽度, y 设置卷去的高度;只能瞬间定位
window.scrollTo(x, y)

// 2. 传递对象数据类型;可以只写一个参数,第三个参数可以实现平滑定位
window.scrollTo({
top: yyy,
left: xxx,
behavior: 'smooth'
})

认识 DOM

Document Object Model 文档对象类型,一整套操作文档流的属性和方法;

获取元素

  • id 直接使用

  1. 给元素标签设置一个 id 属性
  2. id 名是一个天生的变量,可以在 js 内直接使用
  3. 表示的是这个标签元素
  4. 不推荐使用
  • html, head, body(非常规标签)

// html 标签
document.documentElement
// head 标签
documen.head
// body 标签
document.body
  • 根据 id 获取元素

document.getElementById('id名称')
// 有 id 对于的属性,就是这个元素;没有,就是 null
  • 根据类名获取

document.getElementsByClassName('类名')
// 有多少个,放在伪数组内返回;没有,返回一个空伪数组
  • 根据标签名获取

document.getElementsByTagName('标签名')
// 返回伪数组
  • 根据 name 属性来获取

document.getElementsByName('name属性')
// 返回一个伪数组
  • 根据选择器获取一个元素

document.querySelector('选择器')
// 如果有,只返回第一个;如果没有,返回 null;只能获取一个
  • 根据选择器获取一组元素

document.querySelectorAll('选择器')
// 获取全部满足条件元素,返回一个伪数组

操作元素内容

  • innerText

var ele = document.querySelector('div')
ele.innerText
// ele 元素内的所有文本内容
  • innerHTML

var ele = document.querySelector('div')
ele.innerHTML
// 可以解析标签
  • value

var inp = document.querySelector('input')
inp.value
// 表单元素的 value 值

模板字符串

  1. 反引号定义的字符串,可以换行书写
  2. 可以直接在字符串里面解析变量 ${变量}
var age = 28
var str = `我今年${ age }岁了`
console.log(str)
// => 我今年28岁了

操作原生属性

// 读
var box = document.querySelect('div')
console.log(box.id)
// 写
box.id = 'container'

操作自定义属性

// 获取 box 元素的 hello 属性值
var res = box.getAttribute('hello')
// 设置 box 元素的属性为 200
box.setAttribute('hello', 200)
// 删除元素的自定义属性
box.removeAttribute('hello')

操作H5自定义属性

  1. 元素身上有一个叫做 dataset 的成员
  2. 类似对象数据类型
  3. 里面存储所有所有以 data- 开头的 H5 自定义属性
var box = document.querySelector('.box')
console.log(box.dataset)
// => DOMStringMap {id: 'box2', a: '100'}
console.log(box.dataset.a)
// => 100

操作元素样式

  • 设置元素的行内样式

// 带有中划线的名字,改为 驼峰 或者 数组关联语法
var box = document.getElementsByTagName('div')
box.style.color = 'skyblue'
  • 获取元素的行内样式(只能获取到行内样式)

console.log(box.style.height)
console.log(box.style.fontSize)
console.log(box.style['font-size'])
  • 获取元素非行内样式(可以获取行内样式也可以获取非行内样式)

// 带有中划线的名字,改为驼峰或者数组关联语法
var box = document.getElementsByTagName('div')[0]
// 标准浏览器
var res = window.getComputedStyle(box).width
var res1 = window.getComputedStyle(box)['background-color']
var res2 = window.getComputedStyle(box).backgroundColor
console.log(res, res1, res2)
// => 100px rgb(255, 192, 203) rgb(255, 192, 203)

操作元素类名

  • className

// 获取类名,获取这个元素的所有类名,是一个字符串形式
console.log(ele.className)
// 设置类名
ele.className = 'container'
// 追加类名
ele.className += ' container'
  • classList

// 获取类名,是一个类似数组的集合,里面记录了所有的类名
console.log(ele.classList)
// 添加一个类名
ele.classList.add('container')
// 删除一个类名
ele.classList.remove('container')
// 切换一个类名,有就删除,没有就添加
ele.classList.toggle('container')

获取元素尺寸

  • offsetWidth 和 offsetHeight

  1. 元素.offsetWidth
  2. 元素.offsetHeight
  3. 该元素的 内容+ padding + border 区域的尺寸
  4. 不管盒子模型是什么,都是 内容 + padding + border
  5. 当元素 display:none ,拿不到尺寸
  • clientWidth 和 clientHeight

  1. 元素.clientWidth
  2. 元素.clientHeight
  3. 该元素的 内容 + padding 区域的尺寸
  4. 当元素 display:none ,拿不到尺寸

获取元素偏移量

  • offsetLeft 和 offsetTop

  1. 元素.offsetLeft
  2. 元素.offsetTop
  3. 该元素相对于参考元素左边上边的距离
  4. 参考定位父级

获取窗口尺寸

  • DOM 级别获取

document.documentElement.clientWidth
document.documentElement.clientHeight
// 可是窗口的宽度和高度,不包含滚动条的尺寸

window.innerWidth
window.innerHeight
// BOM 级别,包含滚动条的尺寸

DOM 节点的操作

在一个页面内,所有内容都是一个一个节点,document、元素节点(标签)、文本节点(文本内容)、注释节点(注释内容)、属性节点(不作为独立节点出现);节点操作:对节点的增删改查;

获取节点

  • childNodes

父节点.childNodes
// 是一个伪数组,内部包含该父节点下的所有子一级节点
  • children

父节点.children
// 是一个伪数组,内部包含该父节点下的所有子一级 元素 节点
  • firstChild

父节点.firstChild
// 该父节点下的第一个子节点
  • firstElementChild

父节点.firstElementChild
// 该父节点下的第一个子 元素 节点
  • lastChild

父节点.lastChild
// 该父节点下的最后一个子节点
  • lastElementChild

父节点.lastElementChild
// 该父节点下的最后一个子 元素 节点
  • previousSibling

节点.previousSibling
// 该节点的上一个兄弟节点
  • previousElementSibling

节点.previousElementSibling
// 该节点的上一个兄弟 元素 节点
  • nextSibling

节点.nextSibling
// 该节点的下一个兄弟节点
  • nextElementSibling

节点.nextElementSibling
// 该节点的下一个兄弟 元素 节点
  • parentNode

节点.parentNode
// 该节点的父节点,一般为元素节点
  • parentElement

节点.parentElement
// 该节点的父 元素 节点
  • attributes

节点.attributes
// 类似于数组的数据结构,里面包含该元素的所有属性节点
举报

相关推荐

0 条评论