JavaScript 基础(3)

发表于 更新于 分类于 ， 阅读次数：

BOM

浏览器窗口尺寸

  • 两个属性：
    1. innerWidth
    2. innnerHeight
  • 共同点：包含滚动条的尺寸，除了Mac的Safari

浏览器弹出层

  1. alert(‘提示文本’)
  2. confirm(‘提示文本’)
  3. prompt(‘提示文本’)
  • 共同点：阻断程序后续执行（js 是单线程）

浏览器的历史记录

1
window.history.back()
  • 方法
    1. back()
    2. forward()
    3. go(整数) ：负数是后退，0 是刷新当前页面，正整数前进

浏览器版本信息

window 的 navigator 成员，是一个对象，存储着浏览器的版本信息

1
window.nevigator.userAgent
  1. userAgent
  2. appName
  3. platform

浏览器常见事件

  1. onload
    1
    2
    3
    window.onload = functio(){} 
    当所有资源加载完毕执行
    放在head标签里面
  2. onscroll：滚动条滚动就触发
  3. onresize：可视窗口改变的时候触发，结合innerWidth和innerHeight

卷去的高度和宽度

  • 高度
  1. document.documentElement.scrollTop：必须有Document标签
  2. document.body.scrollTop：必须没有Document标签
  3. 兼容写法
  • 宽度
  1. document.documentElement.scrollLeft
  2. document.body.scrollLeft
  3. 兼容写法

滚动到坐标

1
2
3
4
5
6
1. window.scrollTo(横坐标，纵坐标) // 两个参数
2. window.scrollTo({
    top:纵坐标
    left:横坐标
    behavior: 'smooth' // 决定是平滑定位还是瞬时定位 'instant'
}) // 参数个数随意

让浏览器自己滚动到顶部

DOM

获取DOM元素

  • 非常规标签
  1. document.documentElement
  2. document.head
  3. document.body
  • 常规标签
  1. getElementById()
    查找范围：documenst或一个元素，返回一个元素或null
  2. getElementsByTagName()
    返回值：一个伪数组或空的伪数组
  3. getElementsByClassName()
    返回值：一个伪数组
  4. getElemensByName()
  5. querySelector(‘选择器’)
    返回值：css里面找到的第一个内容或null
  6. querySelectorAll(‘选择器’)
    返回值：一个伪数组或空的

操作元素属性

  • 元素属性：原生属性、自定义属性、H5自定义属性（data-xxx）
  • 原生属性：
    读取值：元素.属性名
    设置值：元素.属性名 = 值
  • 自定义属性：不能点操作
  1. getAttribute(‘属性名’)
  2. setAttribute(‘属性名’, ‘值’)
  3. removeAttribute(‘属性名’)
  4. 不管设置什么数据类型，打印的类型都是string
  • H5 自定义属性：
    每个元素都有一个属性dataset，里面包含了所有H5 自定义属性；key 是除了 data- 外的内容叫名字，value 是值。操作：元素.dataset.key
  • 操作元素类名
  1. 设置、修改类名：元素.className = “类名”
  2. 追加类名：新类名前加空格
  3. 删除：字符切割，再写一遍
    • H5 方式操作：
    • 有一个属性：classList
    • 方法：add(): div.classList.add(‘新类名’)
    • 其他方法：remove() toggle()

操作文本内容

  1. innerHTML
  2. innerText
  3. value

操作元素样式

  • 获取行内样式：
    元素.style，获取到一个对象，包含所有的可设置样式。
  • 获取非行内样式：
  1. window.getComputedStyle()方法，返回值：一个对象，可以访问里面的对象
  2. currentStyle 属性 IE低版本
  • 当使用点语法时候，带中划线的样式要转化成驼峰的方式或数组关联法
  • JS不能操作HTML文件和方CSS文件

DOM 节点

元素节点、属性节点、文本节点、注释节点

获取节点

  1. childNodes: 元素.childNodes，元素的所有子节点
  2. children: 元素的所有子元素节点
  3. firstChild: 元素的第一个节点
  4. firstElementChild: 元素的第一个子元素节点
  5. lastChild
  6. lastElementChild
  7. previousSibling: 元素的上一个兄弟节点
  8. previousElementSibing: 元素的上一个兄弟元素节点
  9. nextSibling: 元素的下一个兄弟节点
  10. nextElementSibling: 元素的下一个兄弟元素节点
  11. parentNode: 元素的父节点
  12. parentElement: 元素的父元素节点
  13. attributes: 该元素的所有属性节点

节点属性

描述该节点的信息

  1. nodeType：一种节点的编号
  2. nodeName：节点名称
  3. nodeValue：节点的值

创建节点

  1. createElement(‘便签名’): 返回一个元素节点
  2. createTextNode(‘文本内容’)：返回一个文本节点，不是字符串
  3. createComment(‘注释内容’)
  4. createAttribute(‘属性名’): 返回一个属性节点，可以把它加到元素上

插入节点

  1. appendChild(): 父节点.appendChild(子节点)，放在最后一个子节点的位置
  2. insertBefore()

删除节点

  1. removeChild(): 父节点.removeChild(子节点)
  2. remove(): 节点.remove()，把自己移出父节点

替换节点

  1. replaceChild(): 父节点.replaceChild(新节点，旧节点)

克隆节点

  1. cloneNode(): 节点.cloneNode(布尔值)，默认是false 不克隆后代节点。返回一个克隆好的节点