全部章节 >>>>
本章目录
4.1 文档对象模型简介及属性
4.1.1 文档对象模型概述
DOM（Document Object Model）是文档对象模型的简称
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点
整个文档是一个文档节点
每个HTML 标签是一个元素节点
包含在HTML 元素中的文本是文本节点
每个HTML 属性是一个属性节点
注释属于注释节点 HTML 文档中的节点彼此间都存在关系，类似一张家族图谱
示例：简要说明HTML文档中节点的关系
文档对象模型节点的特点
文档对象模型概述
DOM: 文档对象模型
- 除文档根节点之外的每个节点都有父节点
- 大部分元素节点都有子节点
- 当节点共享同一个父节点时，它们就是同辈
- 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推
- 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推
整个HTML 文档在DOM 中是一个document 对象
|
属性 |
含义 |
|
bgColor |
页面的背景颜色 |
|
fgColor |
文本的前景颜色 |
|
title |
页面标题 |
示例：
document 对象的常用属性
4.1.3 实践练习
4.2 document 对象查找 HTML 元素
4.2.1 通过 id 查找 HTML 元素
使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素
示例：
你好，世界！ 本案例演示了 getElementById 的用法！
var x=document.getElementById("intro"); document.write("
该文本来自 id 为 intro 的段落 :"+x.innerHTML+"
");
innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例：使用getElementsByName() 方法模拟购物车的全选功能
function check() { var cb1 = document.getElementById("allCheck"); var chs = document.getElementsByName("item"); for(var i=0; i
4.2.2 通过 name 查找 HTML 元素
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例：使用getElementsByName() 方法模拟购物车的全选功能
function check() { var cb1 = document.getElementById("allCheck"); var chs = document.getElementsByName("item"); for(var i=0; i
4.2.3 通过标签名查找 HTML 元素
- 使用 document.getElementsByTagName(tagname) 方法可以通过标签名访问页面元素
- 参数 tagname 为必选项，为字符串类型
- 返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组
示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以
var navUl=document.getElementById("nav"); var lis = navUl.getElementsByTagName("li"); for (var i=0; i
4.2.4 通过类名查找 HTML 元素
- 使用 document.getElementsByClassName(classname) 方法可以通过类名访问页面元素
- 参数 classname为必选项，是字符串类型，指需要获取的元素类名
- 返回值为NodeList 对象，表示指定类名的元素集合。可通过节点列表中的节点索引号来访问列表中的节点
可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素
示例：使用getElementsByClassName() 方法实现斑马线效果
通过 id 查找 HTML 元素
通过 name 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
我是带有 box 样式的列表项
window.onload=function() { var ul1=document.getElementById("ul1"); var box=ul1.getElementsByClassName("box"); for(var i=0; i
4.2.5 实践练习
4.3 document 对象改变 HTML
4.3.1 使用document对象改变HTML输出流
JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容
示例：页面中动态输出当前的日期
不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容
4.3.2 使用document对象改变HTML内容
修改 HTML 内容最简单的方法是使用 innerHTML 属性
语法：
document.getElementById(id).innerHTML= 新的 HTML 内容示例：使用 innerHTML 在页面中动态添加内容
function insert() { var obj = document.getElementById("content"); obj.innerHTML="
我是动态添加的内容
" }
4.3.3 使用document对象改变HTML样式
如果需要改变 HTML 元素的样式，可使用以下语法
document.getElementById(id).style.property= 新样式 示例：
function insert() { var obj = document.getElementById("content"); obj.innerHTML="
我是动态添加的内容
" } function changeStyle() { var content = document.getElementById("content"); content.style.borderColor="red"; content.style.color="orange"; content.style.borderStyle="solid"; content.style.borderWidth="2px"; }
每个 HTML 对象都有用于访问 CSS 样式的 style 属性，style 对象中包含一系列与 CSS 属性相对应的属性
style 对象的属性同CSS的属性命名不同，它删除了“-”，第一个单词后面的每个单词首字母大写
4.3.4 使用document对象改变HTML属性
如果需要改变 HTML 元素的属性，可使用以下语法
document.getElementById(id).attribute= 新属性值 示例：添加修改 HTML 样式
function changePic() { var img = document.getElementById("image"); img.src="../img/landscape.jpg"; }
4.3.5 实践练习
4.4 DOM 节点操作
4.4.1 节点信息
可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性
|
属性 |
描述 |
|
parentNode |
当前节点的父节点引用 |
|
childNodes |
当前节点的所有子节点 |
|
firstChild |
当前节点的第一个子节点 |
|
lastChild |
当前节点的最后一个子节点 |
|
previousSibling |
当前节点的前一个兄弟节点 |
|
nextSibling |
当前节点的后一个兄弟节点 |
示例：使用属性查找节点，并设置其样式
function getChildren() { var div1 = document.getElementById("test"); var ps=div1.childNodes; for(var i=0; i
childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点
通过节点对象的 nodeType 属性可以判断属于哪种类型的节点
当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点
4.4.2 动态添加和删除节点
添加节点
- 使用 createElement 创建节点
- 使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾
删除节点
- 使用 removeChild 删除节点
使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素
示例：动态添加和删除节点
var sel=document.createElement("select"); var option1=document.createElement("option"); option1.value="yellow"; option1.innerHTML=" 黄色 "; sel.appendChild(option1); var option2=document.createElement("option"); option2.value="red"; option2.innerHTML=" 红色 "; sel.appendChild(option2); var option3=document.createElement("option"); option3.value="blue"; // 创建一个文本节点 var txt=document.createTextNode(" 蓝色 "); option3.appendChild(txt); sel.appendChild(option3); //select 的 onchange 事件处理 sel.onchange=function() { document.body.bgColor=this.value; } // 将 select 中的第一个元素节点移动到 select 子节点的末尾 sel.appendChild(sel.firstChild); function ins() { document.body.appendChild(sel); } // 删除 select 节点 function del() { document.body.removeChild(sel); }
4.4.3 实践练习
总结：
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
document 对象中用于查找 HTML 元素的方法有
- getElementById() 方法：获取指定 id 的 HTML 页面元素对象
- getElementsByTagName() 方法：返回所有指定标签名的 HTML 页面元素对象
- getElementsByName() 方法：获取一组指定 name 的 HTML 页面元素对象
- getElementsByClassName() 方法：返回所有指定类名的 HTML 页面元素对象
在 DOM 中每个节点都具有访问其他节点的属性
- parentNode 属性：返回当前节点的父节点引用
- childNodes 属性：返回当前节点的所有子节点
- firstChild 属性：返回当前节点的第一个子节点
- nextSibling 属性：返回当前节点的后一个兄弟节点
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204400.html原文链接：https://javaforall.net
