1.引入
BOM 是操作浏览器窗口等一些相关操作的接口
Document 对象,可以获得一些特定的标签并且对其进行操作
只能获得特定标签,不能获得 HTML 中的任意标签,如<div>标签
通过数组索引方式获得特 定标签,不方便维护
2.DOM简介
DOM(Document Object Model):文档对象模型
对文档的结构化的表述
定义了在程序中对该结构进行访问的方式
3.DOM 分类
核心 DOM:用于任何结构化文档的标准模型
定义了与系统平台和编程语言无关的接口,DOM 是一种 API(应用程序编程接口)
HTML DOM:用于 HTML 文档的标准模型
XML DOM:用于 XML 文档的标准模型
4.DOM 作用
访问文档内容,包括元素、属性、文本
增加文档内容,包括元素、属性、文本
删除文档内容,包括元素、属性、文本
修改文档内容,包括元素、属性、文本
5.BOM描述了与浏览器进行交互的方法和接口,DOM描述了处理网页内容的方法和接口。从 window.document 可以看出,DOM的根对象document 是 BOM 的 window 对象的子对象。
6.DOM 树
DOM 将 HTML 文档抽象为树形结构,称这棵树为 DOM 树
DOM 的核心就是对 DOM 树的操作,即增加、删除、修改
7.节点分类
① 整个文档是一个文档节点
② 每个 HTML 元素是元素节点 (html以下的,包括head、title、body、a、h1这些都是元素节点)
③ HTML 元素内的文本是文本节点
④ 每个 HTML 属性是属性节点
⑤注释是注释节点
8.DOM 节点有三类:元素节点、属性节点、文本节点
9.直接获取节点
通过 id 属性获得节点
document.getElementById( )
通过标签名获得所有同名标签
document.getElementsByTagName( )
通过类名获得所有类名相同的标签
document.getElementsByClassName( )
10.通过节点关系获取
通过父节点获得子节点
childNodes 属性——返回节点的子节点集合
document.getElementById("myList").childNodes; 返回的是子节点的集合 document.getElementById("myList").childNodes[0]; 获取元素节点
children属性——返回节点的所有元素子节点集合
document.getElementById("myList").children;
document.getElementById("myList").children[0];
firstChild 属性——返回指定节点的首个子节点
document.getElementById("myList").firstChild;
firstElementChild 属性——返回指定节点的首个元素子节点
document.getElementById("myList").firstElementChild;
通过子节点获得父节点
node.parentNode 属性 ——返回指定节点的父节点
node.parentElement 属性——返回指定节点的父节点
获得前后兄弟节点
previousSibling属性 例:document.getElementById("item2").previousSibling
previousElementSibling 属性—返回指定节点紧跟的前一个元素兄弟节点
11.元素节点内容
innerHTML 属性
innerHTML 是 DOM 中元素节点的属性,相当于一个容器
用于获取或改变任意元素节点的内容,该属性可读可写
操作简单,几乎所有浏览器均支持
12.读取元素节点内容
var txt = document.getElementById("intro").innerHTML;
document.write(txt);
修改元素节点内容
document.getElementById("intro").innerHTML = "hello";
13.元素节点属性
获取某一元素节点的属性
node.getAttribute( attrName )
设置某一元素节点的属性
node.setAttribute( attrName,value )
当属性存在时,为修改相应属性值
当属性不存在时,为添加相应属性
删除某一元素节点的属性
node.removeAttribute( attrName )
判断某一元素节点是否含有某属性
node.hasAttribute( attrName )
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)、nodeValue(节点值)可读可写、nodeType(节点类型)
添加DOM节点
生成一个元素节点: document.createElement( )
生成一个文本节点:document.createTextNode( )
把生成的节点作为某一个节点(node)的子节点进行添加
作为node节点的最后一个子节点:node.appendChild( newNode )
8.3 删除DOM节点
通过父节点删除本节点:myParent.removeChild( mySelfNode )
通过自己删除本节点:mySelfNode.parentNode.removeChild(mySelfNode )
删除一个属性节点: node.attrName = “”;
8.4 修改DOM节点
修改一个元素节点(新节点替换旧节点):oldNode.parentNode.replaceChild ( newNode, oldNode )
修改一个文本节点(替换文本值):textNode.nodeValue = “”;
修改一个属性节点(覆盖原有属性): node.attrName = ‘newAttrValue’;
8.5 节点对象的事件属性
节点对象拥有事件属性——用于指定事件处理函数
节点拥有的事件属性等同于标签中的事件属性
例:
imgNode.onclick
inputNode.onblur
inputNode.onfocus
window.onload
14.DOM操作小结
获取带有指定 id 的节点(元素)- node.getElementById("id");
通过标签名获得所有同名标签- node.getElementsByTagName("tagname");
查找带有相同类名的所有 HTML 元素-
document. document.getElementsByClassName("intro");
通过父节点获得子节点:
- node.children[ ] 获得元素子节点
- node.childNodes[ ]
- node.firstChild
- node.lastChild
通过子节点获得父节点:
- node.parentNode
获得前后兄弟节点:
- node.previousSibling node.nextSibling
获得某一元素节点的属性节点
标准方式获得属性:
node.getAttribute( name )
简单方式获得属性:
node.attrName
修改某一元素节点的属性节点
14.改变 HTML 内容—innerHTML 属性
①innerHTML是DOM中元素节点的属性,相当于一个容器,可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>
②innerHTML属性,可读可写
读取节点内容:node.innerHTML;
修改节点内容:node.innerHTML = “”
直接赋值给属性
特点:
通用性强,几乎所有浏览器均支持
不仅可以操作HTML文档,也可以操作XML文档
操作稍嫌复杂,书写的代码量过大