10. javacript高级程序设计-DOM
1. DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口)
1.1 节点层次
DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。
1.1.1 Node类型
DOM1中定义了一个Node接口,该接口由DOM中所有的节点类型实现,这个Node接口在JavaScript中作为Node类型实现。
每个节点都有一个nodeType属性,因此所有节点类型都共享着相同的基本属性和方法
每个节点都有一个nodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型比居其一:
l Node.ELEMENT_NODE(1);
l Node.ATTRIBUTE_NODE(2);
l Node.TEXT_NODE(3)
l Node.CDATA_SECTION_NODE(4)
l Node.ENTITY_REFERENCE_NODE(5)
l Node.ENTITY_NODE(6)
l Node.PROCESSING_INSTRUCTION_NODE(7)
l Node.COMMENT_NODE(8)
l Node.DOCUMENT_NODE(9)
l Node.DOCUMENT_TYPE_NODE(10)
l Node.DOCUMENT_FRAGMENT_NDOE(11)
l Node.NOTATION_NODE(12)
(1). 判断节点类型
if(someNode.nodeType == 1){
}
适用所有浏览器
(2). nodeName 和 nodeValue,可以了解具体信息,这两个属性取决于属性类型
(3). 节点关系:
- childNodes对象,NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点
- parentNode属性,该属性指向文档树中的父节点
- previousSibling:前面的兄弟节点
- newSibling:后面的兄弟节点
- firstChild:第一个子节点
- lastChild:最后一个子节点
- ownerDocument,该属性指向表示整个文档的文档节点
(4). appendChild():在节点的末尾添加一个节点
hasChildNodes():是否有子节点
insertBefore():在前面插入节点
replaceChild():替换节点
removeChild():移除节点
cloneNode():复制节点
1.1.2 Document类型
l nodeType的值为9
l nodeName的值为 “#document”
l nodeValue的值为null
l parentNode的值为null
l ownerDocument的值为null
l 其子节点可能是一个DocumentType(最多一个),Element(最多一个),ProcessingInstruction或者Comment
常见属性:
document.body
document.title
document.URL
document.domain
document.referrer
document.getElementById()
document.getElementsByTagName()
document.anchors
document.applets
document.forms
document.images
document.links
1.1.3 Element类型
l nodeType的值为1
l nodeName的值为 元素的签名值
l nodeValue的值为null
l parentNode的值为Document或Element
l 子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或者EntityReference
一般会存在下列属性:
id,title,lang,dir,className
<div id="id" title="title" lang="lang" dir="dir" class="className"></div>
可以使用getAttribute(),setAttribute()和removeAttribute()来操作属性
Element类型是使用attributes属性的的唯一一个DOM节点类型,表示所有的属性集合。
1.1.4 Text类型
l nodeType的值为3
l nodeName的值为 “#text”
l nodeValue的值为 节点所包含的文本
l parentNode的值为Element
l 没有子节点
l 可以通过nodeValue属性或data属性访问Text节点中的文本
l appendData(text)
l deleteData(offset,count)
l insertData(offset,text)
l replaceData(offset,count,text)
l splitText(offset)
l substringData(offset,count)
1.1.5 Comment
l nodeType的值为8
l nodeName的值为 “#comment”
l nodeValue的值为 注释的内容
l parentNode的值为Element或者Document
l 没有子节点
1.1.6 CDATASection
l nodeType的值为4
l nodeName的值为 “#cdata-section”
l nodeValue的值为 CDATA区域中包含的内容
l parentNode的值为Element或者Document
l 没有子节点
1.1.7 DocumentType
l nodeType的值为10
l nodeName的值为 doctype的名称
l nodeValue的值为 null
l parentNode的值为Document
l 没有子节点
1.1.8 DocumentFragment
l nodeType的值为11
l nodeName的值为 ‘#document-fragment’
l nodeValue的值为null
l parentNode的值为null
l 子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或者EntityReference
1.1.9 Attr类型
l nodeType的值为2
l nodeName的值为 特性的名称
l nodeValue的值为特性的值
l parentNode的值为null
l 没有子节点
1.2 DOM操作技术
1.2.1 动态脚本
var script = document.createElement('script');
script.type = "text/javascript";
script.sec = "io.js";
document.body.appendChild(script);
1.2.2 动态样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "io.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
1.2.3 操作表格
<table>属性和方法
l caption
l tBodies
l tFoot
l tHead
l rows
l createTHead()
l createTFoot()
l createCaption()
l deleteTHead()
l deleteTFoot()
l deleteCaption()
l deleteRow(pos)
l insertRow(pos)
<tbody>属性和方法
l rows
l deleteRow(pos)
l insertRow(pos)
<tr>属性和方法
l cells
l deleteCell(pos)
l insertCell()pos
1.2.4 使用NodeList
由于NodeList是动态的,在迭代NodeList时,使用length属性初始化第二个变量,然后将迭代器与该变量比较
10. javacript高级程序设计-DOM的更多相关文章
- 11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
- 2020/6/11 JavaScript高级程序设计 DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口).他描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 10.1 节点层次 DOM将任何HTML和XML ...
- javascript高级程序设计---DOM
DOM是文档对象模型的简称,DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树,所有的这些节点和最终的树状结构都有统一的对外接口,达到使用编程语言操作文档的目的,DOM可以 ...
- 24. javacript高级程序设计-最佳实践
1. 最佳实践 l 来自其他语言的代码约定可以用于决定何时进行注释,以及如何进行缩进,不过JavaScript需要针对其松散类型的性质创造一些特殊的约定 l javascript应该定义行为,html ...
- 21. javacript高级程序设计-Ajax与Comet
1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2 ...
- 19. javacript高级程序设计-E4X
1. E4X E4X是对ECMAScript的一个扩展, l 与DOM不同,E4X只用一个类型节点来表示XML中的各个节点 l XML对象中封装了对所有节点都有用的数据和行为.为了表示多个节点的集合, ...
- 18. javacript高级程序设计-JavaScript与XML
1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript ...
- 13. javacript高级程序设计-事件
1. 事件 1.1 事件流 事件流描述的是从页面中接受事件的顺序,IE的事件是冒泡流,而Netscape Communicator的事件流是事件捕捉流. 1.1.1 事件冒泡 <!DOCTYPE ...
- 12. javacript高级程序设计-DOM2和DOM3
1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML ...
随机推荐
- lishell学习之路:流程控制(case)
流程控制case语句: 介绍:多分支case条件语句 1.case语句和if..elif..else语句一样都是多分支条件语句,不过和if多分支条件语句不同的是,case语句只能判断一种条件关系,而i ...
- JQuery中的html(),text(),val()区别
jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...
- 【AngularJS】—— 6基于AngularJS的过滤与排序
阅读目录 程序设计分析 代码以及结果 前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 n ...
- mybatis 简单使用示例(单独使用):
mybatis的单独使用简单示例: 步骤1: 新建xml文件. 示例: <?xml version="1.0" encoding="UTF-8" ?> ...
- python SMTP邮件发送(转载)
Python SMTP发送邮件 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. py ...
- HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
- Hibernate框架之get和load方法的区别
我们在学习Hibernate框架时,经常会进行修改,删除操作,对于这些操作,我们都应该先加载对象,然后在执行或删除的操作,那么这里Hibernate提供了两种方法按照主键加载对象,也就是我要说的get ...
- tcp三次握手与四次挥手
- loadrunner-27796错误寻求解决办法
Action.c(58): Error -27796: Failed to connect to server "www.baidu.com:80": [10048] Addres ...
- HDU 3911 线段树区间合并、异或取反操作
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3911 线段树区间合并的题目,解释一下代码中声明数组的作用: m1是区间内连续1的最长长度,m0是区间内连续 ...