08-JavaScript-DOM基础

DOM

• window:是一个全局对象,代表浏览器中一个打开的窗口,每个窗口都是一个window对象
• document:是window的一个属性,这个属性是一个对象,代表当前窗口中的整个网页,document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容
• DOM
  • 定义了访问和操作 HTML文档(网页)的标准方法
  • DOM全称: Document Object Model, 即文档模型对象
  • 所以学习DOM就是学习如何通过document对象操作网页上的内容

获取DOM元素

• 在JavaScript中HTML标签也称之为DOM元素,使用document时前面不用加window
• 获取DOM元素上
  • 通过id名称获取:document.getElementById
  • 通过class名称获取:document.getElementsByClassName
  • 通过name名称获取:document.getElementsByName
  • 通过标签名称获取:document.getElementsByTagName
  • 通过选择器获取:document.querySelector,只会返回根据指定选择器找到的第一个元素
  • 通过选择器获取:document.querySelectorAll,找到全部符合的元素包装成伪数组返回给我们
• 获取DOM元素中
  • 获取指定元素的所有子元素:元素.children
  • 获取指定元素的所有子节点:元素.childNodes
  • 节点:DOM对象是以树的形式保存了界面上的所有内容,HTML页面每一个部分都是由节点(标签,文本,属性)组成
• 获取DOM元素下
  • 获取指定节点中的第一个子节点:节点.firstChild
  • 获取指定元素总的第一个子元素:元素.firstElementChild
  • 获取指定节点中最后一个子节点:节点.lastChild
  • 获取指定元素中最后一个子元素:元素.lastElementChild
  • 通过子元素获取父元素/节点:元素.parentElement/parentNode
  • 获取相邻上一个节点:元素.previousSibling
  • 获取相邻上一个元素:元素.previousElementSibling
  • 获取相邻下一个节点:元素.nextSibling
  • 获取相邻下一个元素:元素.nextElementSibling

节点增删改查

• 创建节点:document.createElement
• 添加节点:appendChild,默认添加到最后
• 插入节点:insertBefore
• 删除节点:parentNode.remove,只能通过父元素来删除,不能自杀
• 克隆节点:cloneNode,默认情况下不会克隆子元素,需要内容需要传递true

属性增删改查

• 无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,系统在包装这个对象的时候会自动将元素的属性包装到这个对象中,所以只要拿到这个对象就可以拿到标签属性,操作标签属性
• 获取元素属性
  • 对象.属性名称:不能获取自定义属性
  • 对象.getAttribute:可以获取自定义属性
• 修改元素属性
  • 对象.属性名称 = 新的值,不能修改自定义属性
  • 对象.setAttribute,可以修改自定义属性
• 新增元素属性
  • 对象.setAttribute
  • setAttribute方法属性存在就是修改,属性不存在就是新增
• 删除元素属性
  • 对象.属性名称 = "",不能删除自定义属性
  • 对象.removeAttribute,可以删除自定义属性

操作元素内容

• 获取元素内容
  • innerHTML/innerText/textContent
  • innerHTML会显示内容中的标签,innerText/textContent不会显示标签
  • innerText前面没有间隔,innerHTML/textContent前面有间隔
• 设置元素内容
  • 无论通过innerHTML/innerText/textContent设置内容,新内容都会覆盖原来的内容
  • 通过innerHTML设置新内容,内容中如果有标签,会转换成标签再添加,通过innerText/textContent设置新内容,内容中如果有标签,不会转换成标签,会当成一个字符串一起添加

操作元素样式

• 设置元素样式
  • 对象.className = "xxx"
  • 对象.style.样式 = "xxx"
  • 原本在CSS中通过-连接的属性,在js中都用驼峰命名
  • 如果同时设置了css和js,那么会执行js的(js相当于行内样式,优先级最高)
• 获取元素样式
  • 对象.style
  • window.getComputedStyle
  • 通过style方法只能找到通过js中style设置的样式,找不到通过css设置的样式
  • 想要获取css中的样式只能通过window.getComputedStyle来获取
  • getComputedStyle方法接收一个参数,这个参数就是要获取的元素对象
  • getComputedStyle方法返回一个对象,这个对象就保存了CSS设置的样式和属性值