读书笔记 - js高级程序设计 - 第十章 DOM
2017-07-26 23:08
633 查看
文档元素 | 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 |
Node类型 | Node.ELEMENT_NODE 元素 Node.ATTRIBUTE_NODE 属性 Node.TEXT_NODE 文本元素 Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE; Node.COMMENT_NODE Node.DOCUMENT_NODE: Node.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE; Node.NOTATION_NODE |
判断Node类型时 | 最好用数字,因为有些浏览器没有公开上面的常量名 |
nodeType nodeName nodeValue | 1 div html body |
子节点 | someNode.childNodes[0]; //取到第一个元素 someNode.childNodes.item(1);//取到第二个元素 someNode.firstChild someNdoe.lastChild |
把子节点转换成数组 | Array.prototype.slice.call( someNode.childNodes, 0 ) ; |
父节点 | parentNode属性 |
兄弟节点 | previousSibling nextSibling |
判断 是否有子节点 | hasChildNodes() |
ownerDocument | 所有节点都有这个属性 指向整个文档的文档节点 |
操作节点 | 1 放到最后一个子节点 appendChild() ; 和 addChild 差不多,只能有一个 2 放到指定位置 insertBefore(a,b) 要插入的节点 作为参照的节点 3 replaceChild( a, b ) 要插入的节点 和 要替换的节点 4 removeChild( a ) 只是移除节点 5 cloneNode() ; 传true表示深复杂,但它不会复制添加dom节点中的js属性,例如事件处理程序. 6 nomalize() 如果找到了空文本节点,则删除;如果找到相邻的文本节点,则将它们合并为一个文本节点 |
Document类型 | document对象就是HTMLDocument document.documentElement document.firstChild document.childNode[0] 上面三个值都指向 <html> |
document.boby | 指向<body> |
document.docType | 取得对<!DOCTYPE>的引用 ,各个浏览器对它的支持不一致,因此它的作用很有限 |
document.title | 取得标头 |
document.URL | 取得完整 url |
document.domain | 取得域名 域名只能从 紧绷的 设置成 松散的, 反之则不行 |
document.referrer | 取得来源页面的URL |
通讯 | 来自不同域的页面无法通过js通信 如果把两个页面的document.domain都设置为 17zuoe.com ,它们之间就可以通信了 |
查找元素 | getElementById() //注意是通过id 不是通过name getElementByTagName() //返回的是包含标签名的NodeList,在HTML文档中,会返回一个HTMLCollection对象. 可以用[]来访问元素 也可以用 item(0)来访问,也可以用 namedItem 来访问 getElementByTagName( * ) // 返回所有元素 getElementByName() // 返回的是HTMLCollection对象 |
其它集合 | document.anchors 包含文档中所有带 name 特性的<a>元素 document.images 包含文档中所有<img>元素 document.links 包含所有文档中带href特性的 <a>元素 |
文档写入 | document.write() 写入输出流中的文本 document.writeIn() 写入输出流中的文本 末尾添加一个换行符 \n document.open() 打开网页的输出流 打开一个要写入的文档 并把这文档清空 document.close() 关闭网页的输出流 关闭已经打开的文档 相当于关闭它的编辑功能 |
Element类型 | nodeType是1 nodeName的值是元素标签名 / 也可以用TagName nodeValue值为 null parentNode是Document或Element 其子节点可能是 Element Text Comment ProcessingInstruction CDATASection 或 EntityReference |
取得HTML Element的信息 | 都可以用 js 代码取得 var div = document.getElementById("myDiv"); div.id div.className div.title div.lang div.dir 有些修改会立即生效 className 和 dir, 其它的不会立即生效 不要以访问自定义的特性 |
操作HTML元素特性的方法 | getAttribute() var div = document.getElementById("myId"); div.getAttribute("class") //注意这里传的和实际特性名相同 也可以取得自定义的特性 setAttribute(a,b) removeAttribute () 不仅会删除特性的值 也会删除特性 |
HTML元素的属性attributes | element.attributes 它是一个NamedNodeMap 和 NodeList类似 它有如下方法 1 getNamedItem(name) 2 removeNamedItem(name) 3 setNamedItem(node); 4 item(pos) //也可用[]来访问 比如 var id = element.attributes.getNamedItem("id").nodeValue 开发人员很少用attributes 而常用 getAttribute setAttribute removeAttribute |
创建元素 | var div = document.createElement("div") |
创建文本节点 | document.createTextNode(); |
分割文本节点 | document.spliteText(序号) |
Attr类型 | 有3个属性 name value specified |
创建动态脚本的方法 | 插入外部文件 直接插入js代码 var script = document.createElement("script") script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild( script ) ; 但并不知道 什么时候可以加载完脚本 |
样式 | link元素用户包含来自外部的文件 必须将link元素添加到 head 里面 style元素用于指定嵌入的样式 |
NodeList | 理解NodeList NamedNodeMap HTMLCollection 是从整体上透彻理解DOM的关键所在,这三个集合都是动态的,每当文档结构发生变化时,它们都会得到更新。 因此,它们始终都会保存着最新的,最准确的信息。 应尽量减少对NodeList的访问,因为每次访问NodeList, 都会运行一次基于文档的查询. 所以 可以考虑将从NodeList中取得的值缓存起来 DOM操作往往是javascript程序中开销最大的部分,因为每次访问NodeList,都会运行一次查询,有鉴于此,最好的办法就是尽量减少DOM操作 |
相关文章推荐
- 读书笔记 - js高级程序设计 - 第十一章 DOM扩展
- js高级程序设计读书笔记
- JS高级程序设计--读书笔记(DOM对象)
- js学习小结(十六)--javascript 高级程序设计-DOM扩展
- JS高级程序设计11-DOM扩展
- 读书笔记 - js高级程序设计 - 第三章 基本概念
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
- JS高级程序设计--读书笔记(js对象创建)
- JavaScript高级程序设计 DOM事件处理 读书笔记
- JS高级程序设计--读书笔记(BOM对象)
- Javascript高级程序设计第二版第十章--DOM--笔记
- 读书笔记 - js高级程序设计 - 第七章 函数表达式
- 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3
- js高级程序设计(10.高级DOM技术部分代码)
- 读书笔记 - js高级程序设计 - 第五章 引用类型
- 读书笔记 - js高级程序设计 - 第八章 BOM
- javascript高级程序设计笔记-第十章(DOM)
- JS高级程序设计第3章读书笔记
- js高级程序设计--DOM
- JS高级程序设计10-DOM