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

简介

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(attribute, value)	获取或改变 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