——《JavaScript高级程序设计》Chapter10学习笔记

一、节点层次

1.Node类型

1)(Node).nodeType属性

节点nodeType属性有12种。

检测nodeType:

var someNode=document.body;
console.log(someNode.nodeType);//1

2)(Node).nodeSome属性和.nodeValue属性

这两个属性描述节点具体信息。值取决于节点类型。

对于元素节点,nodeSome是标签名,nodeValue是null。

var someNode=document.body;
if (someNode.nodeType==1) {
console.log(someNode.nodeName);//body
console.log(someNode.nodeValue);//null
}

3)节点关系

(1)(Node).childNodes属性
  • 保存着NodeList对象,其不是Array实例。
  • IE9及其他浏览器:包括TEXT节点,元素节点。
  • IE<9:不包括TEXT节点。
基本用法
  • (Node).childNodes[n]

  • (Node).childNodes.item(n)

  • (Node).childNodes.length

      var someNode=document.body;
    
      console.log(someNode.childNodes[0]);
    console.log(someNode.childNodes.item(1));
    console.log(someNode.childNodes.length);
将NodeList转换为数组

Array.prototype.slice.call(nodes,0)方法,或Array.prototype.slice.call(nodes)。

跨浏览器方法如下:

function convertToArray(nodes) {
var array=null;
try {
array=Array.prototype.slice.call(nodes,0);//针对除IE8及更早版本浏览器
} catch(e) {
array=new Array();
for (var i=0,len=nodes.length;i<len;i++) {
array.push(nodes[i]);
}
} return array;
} var myArray=convertToArray(document.body.childNodes);
console.log(myArray);//[text, script]
(2)其他关系属性
  • .parentNode
  • .previousSibling:没有就为null
  • .nextSibling:没有就为null
  • .firstChild
  • .lastChild
  • .ownerDocument:节点所在的文档

4)操作节点方法

(1)(Node).appendChild()
  • 作用1:移动节点,若后面()的是已存在的节点,则将其移动到基准节点的最后一个子节点,删除原节点、

  • 作用2:后插子节点,为基准结点插入最后一个子节点。

  • 返回:插入的节点

      var someNode=document.body;
    
      var returnedNode=someNode.appendChild(someNode.firstChild);
    console.log(returnedNode==someNode.firstChild);//false
    console.log(returnedNode==someNode.lastChild);//true
(2)(Node).insertBefore(,)
  • 作用:前插节点

  • 返回:插入的节点

      var someNode=document.body;
    var newNode=document.createElement("a"); var returnedNode=someNode.insertBefore(newNode,null);//插入为最后一个子节点
    console.log(returnedNode==someNode.lastChild);//true
    console.log(returnedNode==newNode);//true var returnedNode2=someNode.insertBefore(newNode,someNode.firstChild);//插入成为第一个子节点
    console.log(returnedNode2==newNode);//true
    console.log(returnedNode2==someNode.firstChild);//true
    //ps:第二次移动该newNode后第一次插入的地方就没有它了,这个文档只有一个这个newNode
(3)(Node).replaceChild()
  • 作用:替换节点

  • 返回:被替换的节点

  • 被替换节点的所有关系指针都会赋值到新节点上。被替换的节点还在文档中,但其在文档中已经没有了位置。

      var returnedNode=someNode.replaceChild(newNode,someNode.firstChild)
(4)(Node).removeChild()
  • 作用:移除节点

  • 返回:被移除的节点

  • 移除的节点仍然被文档所有,只不过在文档中已经没有了位置。

      var returnedNode=someNode.replaceChild(newNode,someNode.firstChild)
(5)(Node).cloneNode(true/false)
  • 作用:创建调用方法的节点的副本。

  • 参数:true——深复制;false——浅复制

      var myList=document.getElementsByTagName("ul")[0];
    
      var deepList=myList.cloneNode(true);
    console.log(deepList.childNodes.length);//7(IE<9是3) var shallowList=myList.cloneNode(false);
    console.log(shallowList.childNodes.length);//0

2.Document类型

document对象不是整个HTML页面,且是window对象的一个属性,可作为全局对象来访问。

nodeType为9。

1)文档的子节点

(1) document.documentElement

访问html元素

var html=document.documentElement;
(2) document.body

访问body元素

(3)document.doctype

访问!DOCTYPE标签。

浏览器对该属性支持度不一致。

2)文档信息

(1)document.title

取得或设置文档标题

(2)document.URL/.domain/.referer
  • document.URL:取得页面完整的URL
  • document.domain:取得页面域名
  • document.referer:取得来源页面的URL

只有document.domain是可设置的。且有限制:

  • 若URL是p2p.wrox.com,只能设置domain为wrox.com
  • 当页面中包含来自其他子域的框架或内嵌框架时,处于跨域安全限制,不同子域页面无法通过JavaScript通信。如果将每个子域页面设置为相同的值,这些页面就可以互相访问对方的JS对象了。
  • 如果域名应该是设置为松散的(如wrox.com),就不能再设置为紧绷的了(p2p.wrox.com)

3)查找元素

(1)document.getElementById()
  • 一般浏览器严格区分大小写
  • IE8及之前版本不区分大小写
  • IE7及之前版本还会将具有相同name元素的第一个返回
(2)document.getElementsByTagName()

返回一个HTMLCollection对象。

所含方法如下例:

var images=document.getElementsByTagName("img");

console.log(images.length);
console.log(images[0].src);
console.log(images.item(0).src);
console.log(images.namedItem("myImage"));
console.log(images["myImage"]);

取得整个页面所有元素可以用:

var allElems=document.getElementsByTagName("*");
console.log(allElems.length);
(3)document.getElementsByName()

返回带有给定name特性的所有元素。

4)特殊集合

都是HTMLCollection对象。

  • document.anchors:包含文档中所有带name特性的a元素
  • document.forms:包含文档中所有的form元素
  • document.images:包含文档中所有的img元素.
  • document.links:包含文档中所有带href元素的a和area元素

5)DOM一致性检测:document.implementation.hasFeature(,)

检测浏览器实现了哪些部分功能,如

var hasXmlDom=document.impementation.hasFeature("XML","1.0");

6)文档写入

将输出流写入页面。

(1)document.write()/writeln()
  • 在页面加载的过程中,可向页面动态地加载内容。

  • writeln()会在字符串末尾加上(\n)。

     <script type="text/javascript">
    document.write("<strong>"+(new Date()).toString()+"</strong>");
    </script>
可用该法动态地包含外部资源:(字符串内部的”和/记得转义)
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"test1.js\">"+"<\/script>");
</script>
可在文档加载结束后调用document.write():

如此,其内容会重写整个页面

    <script type="text/javascript">
window.onload=function(){
document.write("Hello World!");
}
</script>
(2)document.open()/document.close()

分别用于打开和关闭网页输出流。

3.Element类型

  • nodeType:1

  • nodeName:元素标签名,也可通过tagName属性获取(HTML中始终以全部大写表示)

  • nodeValue:null

      var div=document.getElementById("myDiv");
    console.log(div.tagName);//"DIV"
    console.log(div.nodeName==div.tagName);//true if (div.tagName.toLowerCase()=="div") {
    console.log("true");//true
    }

1)基本属性

  • .id
  • .title:鼠标移动到该元素上时显示出来
  • .lang
  • .dir:语言方向,包括"ltr"或"rtl"
  • .className:为元素指定的CSS类

以上属性可以获取也可以设置。

2)取得特性的方法:(HTMLElement).getAttribute()

  • 传递的特性名与实际特性名相同。(如class传入的就是"class"非"className")。
  • 特性名称不符大小写(传入"ID"和"id"效果一样)
  • 可以取得自定义特性(前缀为data-)
  • 只有公认的非自定义的特性才会以属性形式添加到DOM对象中。
  • 有两类特殊特性,有对应属性名,通过属性名访问和通过getAttribute()访问结果不同(IE7及之前两种方式都是返回和通过属性访问相同的结果)
    • style:通过getAttribute()访问返回的是CSS文本,通过属性会访问一个对象
    • onclick:通过getAttribute()返回的是相应代码字符串,而通过属性访问返回一个JS函数。

3)设置特性的方法:(HTMLElement).setAttribute(,)

  • 参数:两个,要设置的特性名和值。

  • 可操作HTML特性也可操作自定义特性。

  • 对于自定义特性,若通过setAttribute()设置是可以通过getAttribute()访问到的;若通过.属性设置,则不能通过getAttribute()访问到。

      var div=document.getElementById("myDiv");
    div.setAttribute("id","otherId");
    div.align="left";
    console.log(div.getAttribute("id"));//"otherId"
    console.log(div.getAttribute("align"));//"left" div.mycolor="red";
    div.setAttribute("myNewcolor","blue");
    console.log(div.getAttribute("mycolor"));//null
    console.log(div.getAttribute("myNewcolor"));//"blue"

4)删除特性的方法:(HTMLElement).removeAttribute()

不仅清楚特性的值,还完全把这个特性从元素中删除。

var div=document.getElementById("myDiv");
div.removeAttribute("id");
console.log(div.id);//空字符串

5)attributes属性

9种Node类型只有Element使用attribute属性。

attribute属性包含的是一个NamedNodeMap对象,与Nodelist类似,也是个动态的集合。NamedNodeMap对象有以下方法:

.attributes+

  • .getNamedItem(name):返回特性名称等于name的特性节点,等于attributes[name]

  • .removeNamedItem(name):从列表中移除名称为name的特性节点,返回被移除的节点

  • .setNamedItem():向列表中添加特性节点

  • .item(n):返回位于数字n处的特性节点,等于attributes[n]

  • attributes[n].nodeName/nodeValue

    每个节点的nodeName为特性名称,nodeValue为特性值。也可设置nodeValue值。

      var div=document.getElementById("myDiv");
    
      var id=div.attributes.getNamedItem("id").nodeValue;
    console.log(id);//"myDiv" var id1=div.attributes["id"];
    console.log(id);//"myDiv"
removeNamedItem()与removeAttribute()

效果相同。但返回不同。removeNamedItem()返回被移除的特性节点(类型为object)。

var div=document.getElementById("myDiv");

var oldAttr=div.attributes.removeNamedItem("id");
console.log(oldAttr);//id="myDiv"
console.log(typeof oldAttr);//"object" var oldAttr2=div.removeAttribute("ltr");
console.log(oldAttr2);//undefined
attributes属性的用场:遍历特性值

一般不用attributes属性,而是用getAttribute()、setAtrribute()和removeAttribute()。

遍历元素特性时可以用attributes:

var div=document.getElementById("myDiv");

function outputAttributes(element) {
var pairs=new Array(),
attrName,
attrValue,
i,
len; for (i=0,len=element.attributes.length;i<len;i++) {
attrName=element.attributes[i].nodeName;
attrValue=element.attributes[i].nodeValue;
if (element.attributes[i].specified) {
//为了兼容IE7及更早版本,这些版本会返回所有attributes,其每个特性节点有个specified属性,为true才是设置过了的特性
pairs.push(attrName+"=\""+attrValue+"\"");
} } return pairs.join(" ");
} console.log(outputAttributes(div));//"id="myDiv" class="bd" title="text" lang="en" dir="ltr""

6)创建元素

document.createElement()
var div=document.createElement("div");
div.id="newDiv";
document.body.appendChild(div);
IE7及更早期版本用法
if(client.brower.ie&&client.brower.ie<=7){//来自Chapter9客户端检测创建的对象client
var div=document.createElement("<div id=\"myNewDiv\"></div>");
document.body.appendChild(div);
}

该法要求浏览器检测。其他浏览器都不支持。只有在需要避开IE早期版本的问题的情况下使用。

7)元素的子元素

(1)element.childNodes

一定要检测子元素类型。因为有的浏览器包含文本节点,有的不包含。

HTML为:

 <ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

JS为:

var element=document.getElementsByTagName("ul")[0];

for (var i=0,len=element.childNodes.length;i<len;i++) {
if (element.childNodes[i].nodeType==1) {//检测子节点是否为元素
console.log(element.childNodes[i].tagName);
}
}
(2)document.getElementsByTagName()

可通过某个特定标签名取得子节点或后代节点

var element=document.getElementsByTagName("ul")[0];
var items=element.getElementsByTagName("li"); console.log(items);//[li, li, li]

如果ul包含更多次的后代元素,每个层次中的li都会返回

4.Text类型

1)基本属性

  • nodeType:3

  • nodeName:"#text"

  • nodeValue:获取或设置节点包含的文本

  • parentNode:一个ELement

  • 没有子节点

  • data: 和nodeValue一样可以获取或设置Text节点所包含的文本。

  • nodeValue.length/data.length

      var div=document.getElementById("myDiv");
    var textNode=div.firstChild;
    console.log(textNode.nodeValue);//"abcd" textNode.nodeValue="Other Message.";
    console.log(textNode.data);//"Other Message." textNode.data="Some <strong>other</strong> message.";//(1)
    console.log(textNode.data);//"Some <strong>other</strong> message."

注意:(1)语句网页上的呈现结果就是该文本本身(strong标签效果没有呈现,而是呈现出标签文本)。因为此时字符串会经过HTML编码。即大于、小于、引号都会转义

转义方式如下:

	"Some &lt;strong&gt;other&lt;/strong&gt; message."

2)创建文本节点: document.createTextNode()

var element=document.createElement("div");;

var textNode=document.createTextNode("Hello world!");
element.appendChild(textNode); document.body.appendChild(element);

注意,作为参数的文本也会进行HTML编码,如果文本中带有标签,我们在结果中只能看到带标签的文本而非具有标签效果的文本:

var element=document.createElement("div");;

var textNode=document.createTextNode("<strong>Hello</strong> world!");
element.appendChild(textNode); document.body.appendChild(element);

也可以为元素设置多个文本节点,它们会连起来显示:

var element=document.createElement("div");;

var textNode=document.createTextNode("Hello world!");
element.appendChild(textNode); var anotherTextNode=document.createTextNode("Yippee!");
element.appendChild(anotherTextNode); document.body.appendChild(element);

3)规范化文本节点(将相邻文本节点合并):element.normalize()

var element=document.createElement("div");;

var textNode=document.createTextNode("Hello world!");
element.appendChild(textNode); var anotherTextNode=document.createTextNode("Yippee!");
element.appendChild(anotherTextNode); document.body.appendChild(element); console.log(element.childNodes.length);//2 element.normalize();
console.log(element.childNodes.length);//1
console.log(element.firstChild.nodeValue);//"Hello world!Yippee!"

4)分割文本节点:(Element).splitText(n)

新节点将包含指定位置开始到末尾的内容。

var element=document.createElement("div");;

var textNode=document.createTextNode("Hello world!");
element.appendChild(textNode); var newNode=element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue);//"Hello"
console.log(newNode.nodeValue);//" world!"

5.Comment类型

6.CDATASection类型

7.DocumentType类型

console.log(document.doctype.name);//"html"

8.DocumentFragment类型

文本片段继承了Node的所有方法。如果将文档中的节点添加到片段中,就会从文档树种移除。添加到文档片段的新节点也不属于文档树。可通过appendChild()或insertBefore()将其添加到文档中。

var fragment=document.createDocumentFragment();
var ul=document.getElementById("myList");
var li=null; for (var i=0;i<3;i++) {
li=document.createElement("li");
li.appendChild(document.createTextNode("Item "+(i+1)));
fragment.appendChild(li);
} ul.appendChild(fragment);

9.Att特性

即元素的attributes属性中的节点。

  • nodeType:2
  • nodeName:特性名称
  • nodeValue:特性值
  • parentNode:null
  • 无子节点

不建议直接访问特性节点。 推荐使用getAttribute(),setAttribute(),removeAttribute()

二、DOM操作技术

1.动态脚本

动态脚本含义:页面加载时不存在,但在将来某一时刻刻通过修改DOM动态添加的脚本。

1)动态加载外部JS文件

function loadScript(url) {
var script=document.createElement("script");
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
} loadScript("test2.js");

在执行document.body.appendChild(script)前是不会下载外部文件的。也可以添加到head元素。

2)行内方式指定JS代码

跨浏览器方式:

function loadScriptString(code) {
var script=document.createElement("script");
script.type="text/javascript";
try {
script.appendChild(document.createTextNode(code));//Firefox、Safari、Chrome、Opera中
} catch(ex) {
script.text=code;//IE中
} document.body.appendChild(script);
} loadScriptString("function sayHi(){alert('hi');} sayHi();");

2)动态样式

动态样式含义:页面刚加载时不存在的样式,在页面加载完动态添加到页面中。

(1)动态加载外部样式
function loadStryles(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);
} loadStyles("test1.css");

动态加载外部样式文件是异步的

(2)动态添加嵌入式样式
function loadStyleString(css) {
var style=document.createElement("style");
style.type="text/css";
try {
style.appendChild(document.createTextNode(css));//除IE外其他浏览器,IE不允许访问style元素的子节点故会报错
} catch(ex) {
style.styleSheet.cssText=css;//IE的解决办法
}
var head=document.getElementsByTagName("head")[0];
head.appendChild(style);
} loadStyleString("body{background-color:red}");

3.操作表格

便捷方法:

var table=document.createElement("table");
table.border=1;
table.width="100%"; var tbody=document.createElement("tbody");
table.appendChild(tbody); tbody.insertRow(0);//创建第一行
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 1,2")); tbody.insertRow(1);//创建第二行
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2,1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); document.body.appendChild(table);

4.使用NodeList

与NamedNodeMap、HTMLCollection三个集合都是动态的。每当文档结构发生变化时它们都会更新。

一般应减少NodeList访问次数。因为每次访问它都会进行一次基于文档的查询。

DOM基础知识整理的更多相关文章

  1. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  2. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  3. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  4. 【OGG】OGG基础知识整理

    [OGG]OGG基础知识整理 一.GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与 ...

  5. java部分基础知识整理----百度脑图版

    近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...

  6. wifi基础知识整理

    转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...

  7. JavaScript基础知识整理

    只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

  8. C#基础知识整理

    年时,北风吹雁雪纷纷,一条秋裤冻上头.冷的连手都懒得动,就随便翻翻书,也没有更新博客,如今年已过,开始投入到正常的工作状态中,趁现在需求还没有来,把C#基础知识梳理一下,其实一直以来就想这样做的,对于 ...

  9. Oracle ASM 磁盘组基础知识整理(收藏版)

    转至:https://cloud.tencent.com/developer/article/1494403 为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的 ...

随机推荐

  1. nginx-1.10.3 编译安装

    1.系统环境 [root@crazy-acong ~]# cat /etc/redhat-release CentOS release 6.6 (Final) [root@crazy-acong ~] ...

  2. python基础-第五篇-5.1冒泡排序

    几个月过去了,小白逐渐对公司的后端服务熟悉了,不过这天小白又接到一封神秘邮件,是景女神发来的:公司急需一批对语言算法有些了解的优秀员工,鉴于你在公司的表现很不错,现在给到你一个培训机会,请速到开发部报 ...

  3. PHP 提高PHP性能的编码技巧以及性能优化

    0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这 么做,它是 一种可以把多个字符串当作参数的“函数”(译注:PHP ...

  4. activiti基础--1------------------------生成.bpmn和.png以及部署流程定义

    helloworld.dbmn <?xml version="1.0" encoding="UTF-8"?> <definitions xml ...

  5. Iptalbes练习题(三)

    场景需求: (1)员工在公司内部(192.168.124.0/24 ,192.168.122.0/24 )能访问服务器上任何服务 (2)当员工出差,通过VPN连接到公司 (3)公司门户网站允许公网访问 ...

  6. sql获取数组长度

    需求:获取字符串数组1,2,3,4的长度,当然也可以是其他分隔符1|2|3等 方法:通过自定义函数来实现 /* 获取字符串数组长度 */ from sysobjects where id = obje ...

  7. cordova屏幕尺寸

    <platform name="android"> <!-- ldpi : 36x36 px mdpi : 48x48 px hdpi : 72x72 px xh ...

  8. 数组元素的删除 【vector】

    7-5 数组元素的删除(5 分) 完成数组元素的移动功能:假设数组有n个元素,输入一个数x,把数组的第x个位置的元素删除了,后面的元素依次前进一个位置. 重复若干次这样的删除,得到最后的结果. 输入格 ...

  9. 第五章 python中的异常处理

    每种编程语言都会有自己的异常处理机制,虽然各有特色,但基本上都差不多,那么python中强大异常处理机制是什么样的呢? 一.异常: python用异常对象来表示异常情况,遇到错误后,会引发异常.如果异 ...

  10. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...