读书笔记 - js高级程序设计 - 第十章 DOM
|
文档元素
|
是文档的最外层元素，在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高级程序设计 - 第十五章 使用Canvas绘图
读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺 ...
- 读书笔记 - js高级程序设计 - 第十一章 DOM扩展
对DOM的两个主要的扩展 Selectors API HTML5 Element Traversal 元素遍历规范 querySelector var body = document.query ...
- 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3
Node类型的变化 访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...
- 读书笔记 - js高级程序设计 - 第八章 BOM
BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...
- 读书笔记 - js高级程序设计 - 第五章 引用类型
引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string" 需要实验 访问属性的方法 .号和[] 一般情况下要 ...
- 读书笔记 - js高级程序设计 - 第七章 函数表达式
闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value 前三个值的默认值都为false ...
- 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题
5种基本数据类型 可以直接对值操作 判断引用类型 var result = instanceof Array 执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这 ...
- 读书笔记 - js高级程序设计 - 第三章 基本概念
启用严格模式 "use strict" 这是一个 pragma 编译指示 让编码意图更清晰 是一个重要原则 5种简单数据类型 Undefined Null Boolean Num ...
随机推荐
- python绘制WordCloud词云图
目录 前言 核心代码 测试 前言 当我们想快速了解书籍.小说.电影剧本中的内容时,可以绘制 WordCloud 词云图,显示主要的关键词(高频词),可以非常直观地看到结果 核心代码 from word ...
- SpringBoot 入门demo
创建SpringBoot项目方式一 (1)新建maven项目,不使用骨架. 使用maven管理依赖就行了,不必使用骨架(模板). (2)在pom.xml中添加 <!--springboot核心. ...
- 三 Road
3—5年程序员的发展和出路在哪里? 是继续做技术人,还是向管理者发力?是继续留在大公司,还是转投潜力小公司?如果没有核心竞争力,入行一两年的新程序员朋友是可以替代你大部分工作的,而且薪资还低,要怎么办 ...
- 连接数据库 - (mysql-thinkphp) (2)
1.现在conf里面写好选择的数据库 选择好了以后 2.在index里面输入 查询mysql数据库里面的表tables_priv的所有数据 public function index() { $res ...
- Elasticsearch的快速使用——Spring Boot使用Elastcisearch, 并且使用Logstash同步mysql和Elasticsearch的数据
我主要是给出一些方向,很多地方没有详细说明.当时我学习的时候一直不知道怎么着手,花时间找入口点上比较多,你们可以直接顺着方向去找资源学习. 如果不是Spring Boot项目,那么根据Elastics ...
- Swift 语法糖then
then是一个swift初始化库,只有80几行的代码库,确可以让初始化变得很优雅. 1.使用then初始化AnyObject,这里以初始化控件为例 lazy var label = UILabel() ...
- docker学习笔记-03：docker的镜像原理
镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件.它包含运行某个环境所需的所有内容,包括代码.库.环境变量和配置文件. 一.镜像是什么 (一).联合文件系统(Unio ...
- mysql 权限管理 grant revoke
grant all privileges on database.table to 'user'@'ip' identified by 'passwd' with grant option; g ...
- 如何在PHP中进行会话处理？
在PHP中会话处理是一个很重要的概念,它允许用户信息在网站或应用程序的所有页面上保持不变.下面本篇文章就来带大家学习一下PHP中会话处理的基础知识,希望对大家有所帮助. PHP中什么是会话(sessi ...
- 034、Java中自增之++在前面的写法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...