【十】DOM(一)
2016-09-07 09:13
323 查看
一.Node类型
DOM定义了Node接口,由DOM中所有节点类型实现。JS中的所有节点类型都继承自Node类型,因此所有节点类型共享基本的属性和方法。
nodeType属性:每个节点都有一个nodeType属性,用于表明节点的类型。12种,如下:最常用的是元素和文本节点
节点关系:1.每个节点有一个childNodes属性,其中保存一个NodeList对象,这是一种类数组对象(但不是Array的实例),用于保存一组有序节点。它是基于DOM结构动态执行查询的结果,dom结构的变化能自动反映在此对象中。
访问NodeList中节点的方法:方括号语法和item()方法。如someNode.childNodes[0]或someNode.childNode.item(0)。childNodes中的每个节点相互之间是同胞节点,通过previousSibling和nextSibling来访问其他节点。hasChildNodes()方法,在节点包含一个及以上的子节点时返回true。2.每个节点都有parentNode属性,指向文档树的父节点。父节点的firstChild和lastChild的属性分别指向childNodes的第一个和最后一个节点。
操作节点:appendChild():向childNodes列表的末尾添加一个节点,返回新增的节点。如果传入到appendChild()中的节点已经是文档的一部分,则将节点从原位置转移
4000
到新位置。
insertBefore():添加节点到特定的位置,接收两个参数,要插入的节点和作为参照的节点,被插入的节点会成为参照节点的前一个同胞节点。若参照节点为null则等同于appendChild。
replaceChild():替换节点,接收两个参数,要插入的节点和要替换的节点。
removeChild():移除节点,返回被移除的节点。
注:以上方法是操作子节点的,必须先取得父节点。还有一些其他操作方法,是所有类型的节点都有的:
cloneNode():创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数,true表示执行深复制,复制节点及整个子节点树;false浅复制,只复制节点本身。复制后返回的节点副本属于文档所有但是未指明父节点,因此算孤立节点,除非通过appendChild()添加到文档中。注:此方法不会复制添加到DOM节点中的js属性如事件处理程序等。
normalize():处理文档树中的文本节点。
二.Document类型
js通过Document类型表示文档,在浏览器中document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。
文档的子节点:documentElement属性:始终指向html页面的<html>元素;body属性:直接指向<body>元素,document.body;doctype属性:指向<!doctype>标签
文档信息:title属性:指向<title>。接下来的三个属性与对网页的请求有关,所有这些信息都存在于请求的http头部,通过js的这些属性访问:
URL属性:包含完整url;
domains属性:只包含域名;
referrer属性:保存连接到当前页面的那个页面的url;
查找元素:getElementById():参数大小写严格匹配,找不到返回null。多元素ID值相同只返回第一个。
getElementsByTagName():返回包含零个或多个元素的NodeList。在html文档中返回HTMLCollection对象,这个对象有一个方法namedItem(),可以 通过元素的name特性取得集合中的项。如:<img src="***" name="myimg"> --->> var images = document.getElementsByTagName('img'); var
myimg = images.namedItem("myimg");直接用方括号语法也会在后台调用这些方法,如images['myimg']
getElementsByName():返回带有给定name特性的元素。常用的情况是取得单选按钮。
特殊集合:document.forms:包含文档中的所有<form>元素;document.images:包含所有<img>元素
文档写入:write()原样写入、wirteln()在字符串末尾添加换行。如果在文档加载结束后再调用document.write()则输出的内容会重写整个页面。
open()和close()分别用于打开和关闭网页的输出流。
三.Element类型
四.Text类型
特征:nodeType=3,nodeValue的值为节点所包含的文本,可通过nodeValue或data属性访问文本。
length属性,保存节点中字符的数目。
创建文本节点:document.createTextNode();
规范化文本节点:一般情况下每个元素只有一个文本子节点,但也会由例外,normalize()规范文本节点,如果在一个包含两个及以上文本节点的父元素上调用此方法,则会将文本节点合并成一个节点。
分割文本节点:splitText():原文本包含从开始到指定位置之前的内容,新文本节点包含剩下内容,返回新文本节点。这是从文本中提取数据的一种常用的DOM解析技术。
五.DocumentFragment类型
文档片段是一种轻量级的文档,可以包含和控制节点,但是不会像完整的文档那样占用额外资源。如果逐个添加元素,会导致浏览器反复渲染新信息,为避免可以先用一个文档片段保存要创建的元素,再一次性将他们添加到文档中。
创建:document.createDocumentFragment();
六.Attr类型
元素的特性在DOM中以Attr来表示。尽管也是节点,但不认为是DOM树的一部分。Attr对象有三个属性,name,value,specified(布尔值,区别特性是在代码中指定的还是默认的)
document.createAttribute()并传入特性名称可以创建新的特性节点,setAttributeNode()方法将新创建的特性添加到元素中去:element.setAttributeNode('attr');
最常用的方法:getAttribute();setAttribute();removeAttribute();不建议直接访问特性节点。
DOM操作技术
1.动态脚本
DOM定义了Node接口,由DOM中所有节点类型实现。JS中的所有节点类型都继承自Node类型,因此所有节点类型共享基本的属性和方法。
nodeType属性:每个节点都有一个nodeType属性,用于表明节点的类型。12种,如下:最常用的是元素和文本节点
元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12)nodeName和nodeValue属性:了解节点的具体信息。对于元素节点nodeName保存元素的标签名,nodeValue的值为null
节点关系:1.每个节点有一个childNodes属性,其中保存一个NodeList对象,这是一种类数组对象(但不是Array的实例),用于保存一组有序节点。它是基于DOM结构动态执行查询的结果,dom结构的变化能自动反映在此对象中。
访问NodeList中节点的方法:方括号语法和item()方法。如someNode.childNodes[0]或someNode.childNode.item(0)。childNodes中的每个节点相互之间是同胞节点,通过previousSibling和nextSibling来访问其他节点。hasChildNodes()方法,在节点包含一个及以上的子节点时返回true。2.每个节点都有parentNode属性,指向文档树的父节点。父节点的firstChild和lastChild的属性分别指向childNodes的第一个和最后一个节点。
操作节点:appendChild():向childNodes列表的末尾添加一个节点,返回新增的节点。如果传入到appendChild()中的节点已经是文档的一部分,则将节点从原位置转移
4000
到新位置。
insertBefore():添加节点到特定的位置,接收两个参数,要插入的节点和作为参照的节点,被插入的节点会成为参照节点的前一个同胞节点。若参照节点为null则等同于appendChild。
replaceChild():替换节点,接收两个参数,要插入的节点和要替换的节点。
removeChild():移除节点,返回被移除的节点。
注:以上方法是操作子节点的,必须先取得父节点。还有一些其他操作方法,是所有类型的节点都有的:
cloneNode():创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数,true表示执行深复制,复制节点及整个子节点树;false浅复制,只复制节点本身。复制后返回的节点副本属于文档所有但是未指明父节点,因此算孤立节点,除非通过appendChild()添加到文档中。注:此方法不会复制添加到DOM节点中的js属性如事件处理程序等。
normalize():处理文档树中的文本节点。
二.Document类型
js通过Document类型表示文档,在浏览器中document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。
文档的子节点:documentElement属性:始终指向html页面的<html>元素;body属性:直接指向<body>元素,document.body;doctype属性:指向<!doctype>标签
文档信息:title属性:指向<title>。接下来的三个属性与对网页的请求有关,所有这些信息都存在于请求的http头部,通过js的这些属性访问:
URL属性:包含完整url;
domains属性:只包含域名;
referrer属性:保存连接到当前页面的那个页面的url;
查找元素:getElementById():参数大小写严格匹配,找不到返回null。多元素ID值相同只返回第一个。
getElementsByTagName():返回包含零个或多个元素的NodeList。在html文档中返回HTMLCollection对象,这个对象有一个方法namedItem(),可以 通过元素的name特性取得集合中的项。如:<img src="***" name="myimg"> --->> var images = document.getElementsByTagName('img'); var
myimg = images.namedItem("myimg");直接用方括号语法也会在后台调用这些方法,如images['myimg']
getElementsByName():返回带有给定name特性的元素。常用的情况是取得单选按钮。
特殊集合:document.forms:包含文档中的所有<form>元素;document.images:包含所有<img>元素
文档写入:write()原样写入、wirteln()在字符串末尾添加换行。如果在文档加载结束后再调用document.write()则输出的内容会重写整个页面。
open()和close()分别用于打开和关闭网页的输出流。
三.Element类型
四.Text类型
特征:nodeType=3,nodeValue的值为节点所包含的文本,可通过nodeValue或data属性访问文本。
length属性,保存节点中字符的数目。
创建文本节点:document.createTextNode();
规范化文本节点:一般情况下每个元素只有一个文本子节点,但也会由例外,normalize()规范文本节点,如果在一个包含两个及以上文本节点的父元素上调用此方法,则会将文本节点合并成一个节点。
分割文本节点:splitText():原文本包含从开始到指定位置之前的内容,新文本节点包含剩下内容,返回新文本节点。这是从文本中提取数据的一种常用的DOM解析技术。
五.DocumentFragment类型
文档片段是一种轻量级的文档,可以包含和控制节点,但是不会像完整的文档那样占用额外资源。如果逐个添加元素,会导致浏览器反复渲染新信息,为避免可以先用一个文档片段保存要创建的元素,再一次性将他们添加到文档中。
创建:document.createDocumentFragment();
六.Attr类型
元素的特性在DOM中以Attr来表示。尽管也是节点,但不认为是DOM树的一部分。Attr对象有三个属性,name,value,specified(布尔值,区别特性是在代码中指定的还是默认的)
document.createAttribute()并传入特性名称可以创建新的特性节点,setAttributeNode()方法将新创建的特性添加到元素中去:element.setAttributeNode('attr');
最常用的方法:getAttribute();setAttribute();removeAttribute();不建议直接访问特性节点。
DOM操作技术
1.动态脚本
//外部文件 function loadScript(url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.body.appendChild(script) } loadScript('example.js') //行内方式 var script = document.createElement('script'); script.type = 'text/javascript'; var code = "function sayhi() { alert('hi'); }"; try { script.appendChild(document.createTextNode code); } catch { script.text = code; } document.body.appendChild(script)2.动态样式
function loadStyle(url) { var link = document.createElement('link'); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName("head")[0]; head.appendChild(link); } loadStyle('example.css');
相关文章推荐
- 文章标题
- 第十一章 ICMP:Internet控制报文协议
- RecyclerView的使用
- 带你玩转Visual Studio——调用约定与(动态)库
- Java中的DateFormatter
- UVa 557 Burger (概率+递推)
- ROWNUM
- BootStrap中的表单大全
- MyBatis学习总结[5]-动态 SQL
- POJ 2777 Count Color (线段树)
- Codeforces Round #228 (Div. 2) C Fox and Box Accumulation(贪心)
- Java线程:线程的调度-守护线程
- Codeforces Round #228 (Div. 2) B Fox and Cross(DFS)
- 初学C++之自定义类型名简化
- Spring 使用注解方式进行事务管理
- Codeforces Round #228 (Div. 2) A - Fox and Number Game(水题)
- Java 数组声明、创建、初始化详解
- 解方程(按位或)
- 2、从键盘上输入两个整数,由用户回答它们的和,差,积,商和取余运算结果,并统计出正确答案的个数。
- Android Studio 将引用第三方jar包的android工程打包成jar包