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属性初始化第二个变量,然后将迭代器与该变量比较
转载于:https://www.cnblogs.com/SLchuck/p/4490723.html
10. javacript高级程序设计-DOM相关推荐
- 11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
- JavaScript高级程序设计 DOM事件处理 读书笔记
1.IE 不支持事件的捕获. 2.事件捕获阶段不触发事件. 3.冒泡阶段触发事件. 4.html中处理事件 (1)<input type="button" οnclick ...
- 18. javacript高级程序设计-JavaScript与XML
1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript ...
- 12. javacript高级程序设计-DOM2和DOM3
1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级."DOM2级核心"为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XH ...
- 25. javacript高级程序设计-新兴的API
1. 新兴的API requestAnimationFrame():是一个着眼于优化js动画的api,能够在动画运行期间发出信号.通过这种机制,浏览器就能够自动优化屏幕重绘操作 Page Visibi ...
- 17. javacript高级程序设计-错误处理与调试
1. 错误处理与调试 l 在可能发生错误的地方使用try-catch方法,可以对错误进行及时的相应 l 使用window.onerror事件处理程序,这种方式可以接受try-catch不能处理的所有错 ...
- 22. javacript高级程序设计-高级技巧
1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...
- 《JavaScript高级程序设计(第3版)》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...
- JS高级程序设计拾遗
<JavaScript高级程序设计(第三版)>反反复复看了好多遍了,这次复习作为2017年上半年的最后一次,将所有模糊的.记不清的地方记录下来,方便以后巩固. 0. <script& ...
最新文章
- java数组长度怎么求,含答案解析
- 比较常规治疗登记中阿巴西谱、阿达木单抗、依那西普和英夫利昔单抗治疗类风湿关节炎的疗效和起效时间...
- redhat7配置本地源
- 状态目标bfs+哈希表 + 三杯水
- github 部署mysql_GitHub - luckman666/deploy_mysql_cluster: 一键部署mysql集群
- 张季跃 201771010139《面向对象程序设计(java)》第十八周学习总结
- 历时3个月,我们是如何为一个开源项目集资300万美元的?
- Windows应用程序组成及编程步骤
- 怎么用itunes来打开手机软件
- 梳理.net知识,准备考试
- 对IO设备的控制方式
- 联想小新系列笔记本 黑苹果BIOS配置
- 数据库管理系统的基本组成
- 下载网站的ICO图标方法
- 第39级台阶python实现
- [548]OpenCV之cv2函数
- Ant Design Pro 企业级后台实战(73 个视频)
- NAMD 中计算水分子沿某一放向的平均值 (tcl/tk 脚本输出数据, awk 求某一列平均值)
- http、tcp/ip、socket
- IE7下li Bug