Dom基础《javascript高级程序设计》阅读笔记
学习javascript也将近两个星期了,为了更快更好地掌握这门知识,我决定从今天开始坚持写博客与各位大牛学习交流,希望大家多多指教我这个菜鸟。这是我的第一篇阅读笔记,基本上就是记录书上一些重要的基础知识点,花了自己很长的时间来敲进去,所以希望各位读者转载的话请注明出处。
1,常用Node类型:Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.DOCUMENT_NODE(9)
对于元素节点,nodeName中保存的始终都是元素的标签名,而nodeValue的值始终是null
2.节点关系,如下图:
hasChildNodes()这个方法在节点包含一个或多个子节点的情况下返回true;ownerDocument属性指向整个文档的文档节点
3,操作节点
appendChild()方法用于向childNodes列表的末尾添加一个节点,并返回新增的节点;如果新增的节点已经是文档的一部分,那结果就是将该节点从原来的位置转移到新位置。
insertBefore()方法接受两个参数:要插入的节点和作为参考的节点;被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。
replaceChild()方法接受两个参数:要插入的节点和要替换的节点,要替换的节点将由这个方法返回并从文档树中删除,同时由要插入的节点占据其位置。
removeChild()方法接受一个参数,即要删除的节点,被删除的节点将成为方法的返回值。
注:replaceChild()和removeChild()方法一样,被移除的节点仍然为文档所有,只不过在文档中已经没有了自己的位置
前面四个方法必需先取得父节点(使用parentNode属性)
4,其它方法
cloneNode()方法用于创建调用这个方法的节点的一个完全相同的副本,该方法接受一个布尔值参数;true为深复制,也就是复制节点及其整个子节点树,false只复制该节点。
normalize()方法用来处理文本节点,文本节点不包含文本或者连接出现两个文本节点的情况。
5.Document类型
Document类型表示文档,在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。
文档的子节点:
document.documentElement,document.childNode[0],document.firstChild都指向<html>元素
document.body指向<body>元素,document.title可以取得<title>元素中的文本
document.URL取得的是地址栏中显示的URL,domain属性中只包含页面的域名,documnet.referrer取得来源页面的URL,三个属性中只有domain可以设置。
查找元素:
documnet.getElementById(),接受一个ID参数,如果不存在返回null;如果页面中多个元素ID相同只返回第一次出现的元素;
document.getElementsByTagName(),接受一个标签名的参数,返回的是包含零个或多个元素的NodeList,在HTML中返回一个HTMLCollection对象;与NodeList相似,可以使用方括号语法或item()方法来访问HTMLCollection对象中的项,该对象还有一个nameItem()方法可以通过元素的name特性取得集合中的项。
document.getElementsByName()方法,只有HTMLDocument类型才有这个方法,用法顾名思义,而返回的也是一个HTMLCollection对象。
特殊集合:
document.anchors:包含文档中所有带有name特性的<a>元素;
document.forms:包含文档中所有的<form>元素;
document.images:包含文档中所有的<img>元素;
document.links:包含文档中所有带href特性的<a>元素。
文档写入:
这个能力体现在四个方法:write(),writeln(),open(),close();
write(),writeln()可以用来动态地包含外部资源,如下列:
document.write("<script type=\"text/javascript\" src=\"file.js\">"+"</scr"+"ipt>" );
6,Element类型
取得属性:
操作特性的DOM方法主要有三个:getAttribute(),setAttribute(),removeAttribute()
有两类特殊的特性需要注意:第一类是style,在通过getAttribute()访问时,返回的是包含的CSS文本,而通过属性来访问它则返回一个对象;第二类是onclick这样的时间处理程序,当通过getAttribute()访问会返回响应的代码字符串,而通过onclick属性访问时会返回一个javascript函数。
attributes属性:
Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,元素的每一个特性都由一个attr节点表示,每个节点都保存在NamedNodeMap对象中。NamedNodeMap拥有一下方法:
getNamedItem(name):返回nodeName属性等于name的节点;
removeNamedItem(name):从列表中已出nodeName属性等于name的节点;
setNamedItem(node):向列表中添加节点,以节点的nodeName属性为索引;
item(pos):返回位于数字pos位置处的节点。
attributes属性中包含一系列节点,每个节点的nodeName就是特性的名称,而节点的nodeValue就是特性的值。每个特性节点都有一个名为specified的属性,这个属性的值如果为true,则意味这要么是在HTML中指定了相应的特性,要么是同时setAttribute()方法设置了该特性。
创建元素:
document.createElement()方法可以创建新元素,这个方法只接受一个参数,即要创建元素的标签名。
7,Text类型
文本节点由Text类型表示,包含的是可以照字面解析的纯文本内容。纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。可以通过nodeValue和data属性访问Text节点中包含的文本。
使用下列方法可以操作节点中的文本:
appendData(text):
deleteData(offset,count):
insertData(offset,text):
replaceData(offset,count,text):
splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点
substringData(offset,count):
除了这些方法外,文本节点还有一个length属性,保存着节点中字符的数目。
创建文本节点:documnet.cteateTextNode(),该方法接受一个参数——要插入节点中的文本。