文档元素
是文档的最外层元素,在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的更多相关文章

  1. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  2. 读书笔记 - js高级程序设计 - 第十一章 DOM扩展

      对DOM的两个主要的扩展 Selectors API HTML5  Element Traversal 元素遍历规范 querySelector var body = document.query ...

  3. 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3

      Node类型的变化   访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...

  4. 读书笔记 - js高级程序设计 - 第八章 BOM

      BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...

  5. 读书笔记 - js高级程序设计 - 第五章 引用类型

      引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string"  需要实验 访问属性的方法 .号和[] 一般情况下要 ...

  6. 读书笔记 - js高级程序设计 - 第七章 函数表达式

      闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...

  7. 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计

      EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value   前三个值的默认值都为false   ...

  8. 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题

      5种基本数据类型 可以直接对值操作 判断引用类型 var result = instanceof Array 执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这 ...

  9. 读书笔记 - js高级程序设计 - 第三章 基本概念

    启用严格模式 "use strict" 这是一个 pragma 编译指示 让编码意图更清晰  是一个重要原则 5种简单数据类型 Undefined Null Boolean Num ...

随机推荐

  1. jquery 操作单选框,复选框,下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...

  2. MySQL部分语法

    MySQL 1.先进入到d盘根目录(自己安装MySQL的盘符) cd d:\2.输入net start mysql3.在d盘的根目录下输入mysql -u root -p就可以进入mysql的命令提示 ...

  3. StringGrid换行功能

    关闭stringgrid的defaultdrawing功能 StringGrid1.Cells[cCol,cRow] := '测试1'+#13#10+'测试2'; procedure TForm1.S ...

  4. 命令打开java控制面板

    运行一些java程序时,会提示java安全阻止,需要手动运行,java7一起更改安全级别为“中”就可以了,java8需要配置信任网站 . 这些操作都需要在java控制面板进行,经常会出现无法在控制面板 ...

  5. 标准查询运算符---LINQ

    Where 根据给定的谓词对序列进行过滤 Select 指定要包含一个对象或对象的一部分 SelectMany 一种查询类型,返回集合的集合.该方法将这些结果合并为一个单独的集合 Take 接受一个输 ...

  6. stm32串口收发导致的死机

    stm32串口收发导致的死机 很久以前有偶尔遇到过串口死机的情况,那是当时的我写出来的代码自己都觉得有问题,也就没注意.用了stm32做项目以后也就没遇到过了,今天做了个高压测试,每5ms定时发送一次 ...

  7. JS 判断是否为安卓或IOS系统

    其实很简单,代码如下<script type="text/javascript"> var device = navigator.userAgent; || devic ...

  8. dubbo 相关面试题 有用(转)

    调用关系说明: · 0. 服务容器负责启动,加载,运行服务提供者. · 1. 服务提供者在启动时,向注册中心注册自己提供的服务. · 2. 服务消费者在启动时,向注册中心订阅自己所需的服务. · 3. ...

  9. java#StringBuffer&StringBuilder

    StringBuffer A thread-safe, mutable sequence of characters. A string buffer is like a String, but ca ...

  10. 19 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.   思路:一个栈存普通元素,一个最小栈存放目前位置最小的元素,只在压入的时候判断是否为空以及最小元素,其他情况正常处理 ...