好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[JavaEE] 好程序员分享JavaScript之-文档对象模型(DOM)

[复制链接]
10 0
叶子老师 发表于 昨天 17:27 | 只看该作者 |阅读模式 打印 上一主题 下一主题
好程序员分享JavaScript之 -文档对象模型(DOM)DOM -----Document Object Model
文档对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台, 提供了标准的 HTML 和 XML 对象集, 并有一个标准的接口来访问并操
作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件,如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前,创建前端 Web 应用程序都必须使用
Java Applet 或 ActiveX 等复杂的组件, 现在基于 DOM 规范, 在支持 DOM 的浏览器环境中,Web开发人员可以很快捷、 安全地创建多样化、 功能强大的Web应用程序。 这里只讨论
HTML DOM。
一、DOM概述
1、文档对象模型定义了 JavaScript 可以进行操作的浏览器,描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面:
1)核心 JavaScript 语言参考(数据类型、运算符、基本语句、函数等)
2)与数据类型相关的核心对象(String、Array、Math、Date 等数据类型)
3)浏览器对象(window、location、history、navigator 等)
4)文档对象(document、images、form 等)
2、JavaScript 中两种主要的对象模型
1)浏览器对象模型 (BOM)
提供了访问浏览器各个功能部件,如浏览器窗口本身、浏览历史等的操作方法。(见前一篇)
2)文档对象模型 (DOM)
提供了访问浏览器窗口内容,如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。
在早期的浏览器版本中,浏览器对象模型和文档对象模型之间没有很大的区别。
二、主要作用
主要用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。
文档:标记型文档----标签、文本、属性等
对象: 封装了属性和方法,可以调用里面的属性和方法。
模型:所有标记型文档都具备一些共性特征的体现。
三、一些重要的概念(主要DOM树)
1、DOM树模型:
DOM解析将按照标签的层次体现出标签的所属,形成一个树状结构---DOM树。
标签、属性和文本内容称为节点(node),节点也称为对象,标签通常也称为页面中的元素(element)
1)DOM技术的核心内容:
把标记文档变成对象树,通过对树中的对象进行操作,实现对文档内容的操纵。
2)DOM解析的方式:
将标记文档解析成一棵DOM对象树,并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成
3)DOM解析的好处:
可以对树中的节点进行任意的操作:增删改查
4)DOM解析的弊端:
这种解析需要将整个标记型文档加载进内存,因此,如果标记型文档很,耗内存。
2、DHTML:动态的HTML,它不是一门语言,是多项技术综合体的简称。
HTML+CSS的方式做的是静态网页,要想变成动态的,必须在此基础上加入JS和DOM技术。因此,DHTML包含:HTML+CSS+JS+DOM
3、HTML:提供标签,封装数据
4、CSS:提供样式属性,对数据的显示样式进行定义
5、DOM: 把标记型文档封装成对象,供JS操纵
6、JS: 提供程序设计语言,通过DOM来操纵文档内容和显示样式
四、 DOM中获取节点的方法
节点都具备三个必备属性:节点名称、节点类型、节点值。
节点的类型: 标签节点的类型值为1,属性节点的类型值为2,文本节点的类型值为3
节点值:标签型节点是null,没有值的。只有属性和文本节点才可以有值。
1、getElementById() :通过节点的id获取该节点对象
function getNodeDemo1(){
//获取id为divid1的节点
//var divNode= document.getElementById("divid1");
var divNode= document.getElementById("divid2");
//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
//获取div节点中的文本 innerHTML innerText 属性
var txtHTML = divNode.innerHTML;
var txt = divNode.innerText;
alert(txtHTML+","+txt);
//更改div节点中的文本内容
//divNode.innerHTML="我把它改成湖南城市学院了....";
divNode.innerHTML="我把它改成湖南城市学院了....".fontcolor("red");
}
2、getElementsByName() :通过节点的name属性获取节点集合----注意,是集合
function getNodeDemo2(){
var node = document.getElementsByName("userName");
//alert(node.nodeName);//undefined
//alert(node);//因为是数组,所以是集合
//alert(node[0].nodeName);//INPUT
//alert(node.length);//1
//alert(node[0].nodeType);//1
alert(node[0].nodeValue);//标签型节点的value都是null
//alert(node[0].getAttribute("value"));
}
3、getElementsByTagName() :通过节点的标签名字获取节点集合
1)获取document下的所有
function getNodeDemo3(){
var nodes = document.getElementsByTagName("a");
//alert(nodes.length);//5
//alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容:城市湖南福彩网
//给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时,若属性不存在则是添加,若存在则是修改
for(var x=0; x<nodes.length; x++){
//alert(nodes[x].innerHTML);
nodes[x].target = "_blank";
}
}
2)获取<div>标签下的所有<a>节点
function getNodeDemo4(){
var divNode = document.getElementById("mylink");
var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点
for(var x=0; x<nodes.length; x++){
nodes[x].target = "_blank";
}
}
五、利用节点的层次关系(level)获取节点的方法
父节点:parentNode属性
子节点:childNodes集合, firstChild() , lastChild()
上一个兄弟节点:previousSibling属性
下一个兄弟节点:nextSibling属性
1、获取父节点
var tabNode = document.getElementById("tableid1");
var node = tabNode.parentNode;
2、获取子节点
var nodes = tabNode.childNodes;
注意:1)如果<table>后面有回车符,高版本的IE和火狐会识别成 “空白文本”#text,而低版本IE会直接越过-----不光是<table>节点,其它节点也一样
2)表格的,<table>标签和<tr>标签中间,其实还隐藏着一个<tbody>标签----表格体
3、获取兄弟节点
var node = tabNode.previousSibling.previousSibling;//上一个兄弟
alert(node.nodeName);//div
var node = tabNode.nextSibling.nextSibling;//上一个兄弟
alert(node.nodeName);//dl
六、DOM中的一些操作
1、创建文本对象
function createAndAdd1(){
//1利用createTextNode()创建一个文本对象
var oTextNode = document.createTextNode("新的文本,很好!");
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oTextNode);
}
2、创建标签对象
function createAndAdd2(){
//1利用createElement()创建一个标签对象
var oBtnNode = document.createElement("input");
oBtnNode.type="button";
oBtnNode.value="新建的按钮";
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oBtnNode);
}
3、直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作
function createAndAdd3(){
var divNode = document.getElementById("div1");
//divNode.innerHTML="<input type='button' value='一个新按钮'/> ";
divNode.innerHTML="<a href='http://********'>一个超链接</a> ";
}
4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点,后者删自己----不建议使用
function deleteNode(){
var oDivNode = document.getElementById("div2");
//自杀式----不建议
//oDivNode.removeNode();//默认false,不删除子节点集合
//oDivNode.removeNode(true);//true,删除子节点集合
//通过父节点去删除它的孩子
oDivNode.parentNode.removeChild(oDivNode);
}
5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点,后者替换自己----不建议使用
function updateNode(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
//自杀式----不建议
//oDivNode.replaceNode(oDivNode4);
//通过父节点去替换它的孩子:用oDivNode4去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);
}
6、替换节点(克隆替换)
function updateNode2(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时,连子节点一起克隆
//通过父节点去替换它的孩子:用oDivNode4_2去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);
}

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技湖南福彩网 。All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启

江苏福彩网 湖南福彩网 上海福彩网 西藏福彩网 淅江福彩网 辽宁福彩网 江苏福彩网 湖南福彩网 江苏福彩网 上海福彩网