JS学习笔记-文档对象模型 (DOM)

发布于 2022-04-18  1184 次阅读


简介

DOM将 web 页面与编程语言连接起来,使得我们可以用JS操作网页文档(如更改HTML元素和属性、CSS样式、对HTML事件做出响应或创建新的HTML事件)

  • 文档:表示整个HTML网页文档
  • 对象:把网页的每一部分都转化为对象
  • 模型:表示对象之间的关系,方便我们获取对象

节点:构成HTML文档最基本的单元

  • 文档节点:整个HTML文档
  • 元素节点:HTML文档中的HTML标签
  • 属性节点:元素的属性
  • 文本节点:HTML标签中的文本内容

每个节点都有3个属性 nodeName nodeType nodeValue

document对象:document对象代表整个HTML页面,可以访问HTML页面的任何元素。

方法

查找 HTML 元素

通常使用id访问HTML元素

通过TagName和ClassName会返回一个类数组对象,所有查询到的元素会封装到对象中

querySelector如果选择器选择了多个元素,只返回第一个

方法描述
document.getElementById(id)通过元素 id 来查找一个元素
document.getElementsByTagName(name)通过标签名来查找一组元素
document.getElementsByClassName(name)通过类名来查找一组元素
document.querySelector(selector)通过CSS选择器查找一个元素节点对象
document.querySelectorAll(selector)通过CSS选择器查找一组元素节点对象

读取或改变 HTML 元素

读取HTML节点属性,可以直接用元素.属性名

如 元素.id 元素.value 但是不能用元素.class,要用元素.className

方法描述
element.innerHTML = new html content获取或改变元素的 inner HTML
element.attribute = new value获取或改变 HTML 元素的属性值
element.setAttribute(attributevalue)获取或改变 HTML 元素的属性值
element.style.property = new style获取或改变 HTML 元素的样式

添加和删除元素

方法描述
document.createElement(element)创建元素节点对象
document.createTextNode(element)创建文本节点对象
子节点.parentNode返回父元素节点对象
父节点.removeChild(子节点)删除一个子节点
父节点.appendChild(子节点)向父节点添加一个子节点
父节点.replaceChild(新节点,旧节点)替换一个子节点
父节点.insertBefore(要插入的节点,指定节点)在指定子节点前插入一个子节点
document.write(text)写入 HTML 输出流

事件

通常使用id访问HTML元素来完成事件与事件处理函数的绑定

方法1:直接在标签的属性中绑定

方法2:获取对象,并对对象的属性进行绑定

在事件响应函数中,响应函数是给谁绑定的,this就是谁

注意:如果将JS代码写在页面上方,在代码执行时,页面还未完成加载,id值可能为空。

解决办法:将JS代码写在页面下方,等待页面加载完毕再执行JS代码,或使用onload事件。

/*
 * onload事件在整个页面加载完成后触发
 * 为window绑定一个onload事件
 * 该事件对应的响应函数将会在页面加载完成后执行
 */
window.onload = function(){};
方法描述
document.getElementById(id).onclick = function(){code}向 onclick 事件添加事件处理程序

以对id为btn的按钮绑定事件为例

//获取按钮对象
var btn = document.getElementID("btn");
//绑定一个单机事件
btn.onclick = function(){};
/*
 * 也可以定义一个专门用来绑定单机响应的函数
 * 参数:
 * idStr 对象的id值   fun 事件的回调函数
 */
function myClick(diStr , fun){
   var btn = document.getElementById(idStr);
   btn.onclick = fun