ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
1.文档节点是每个文档的根节点。在HTML页面,文档节点始终都是<html>元素,因此我们也称其为**文档元素**。 2.DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。除了IE之外,在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。 3.每个节点都有一个**nodeType**属性,用于表明节点的类型。节点类型由在Node类型中定义的12个数值常量来表示。其中元素节点属性值为1,特性节点的属性值为2,文本节点的属性值为3。将nodeType属性与数字值比较可以检测其节点类型: ~~~ if (someNode.nodeType == 1){ alert('Node is an element'); } ~~~ 4.要了解节点的具体信息,可以使用**nodeName**和**nodeValue**属性。其中nodeName保存着节点的具体名称(如<p>标签的nodeName值为大写的‘P’,nodeValue始终为null)。 5.每个节点都有一个**childNodes**属性,其中保存着一个NodeList对象。NodeList对象是一种类数组对象,用于保存一组有序的节点。虽然可以使用方括号语法来访问其子项,而且这个对象也有length属性,但它并不是Array的实例。NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结构,因此DOM结构的变化能够自动反映在NodeList对象中。将childNodes转换成数组的方法: ~~~ function convetToArray(nodes){ var array = null; try { array = Array.prototype.slice.call(nodes,0); } catch(error) { array = new Array(); for (var i=0;i<nodes.length;i++) { array.push(nodes[i]); } } return array; } ~~~ 元素节点内的空白符也会作为文本标签被childNodes所包含。 6.描述节点间关系的属性还有:**parentNode、nextSibling、previousSibling、firstChild、lastChild** 7.**hasChildNodes()**方法在节点包含一或多个子节点的情况下返回true。所有节点都有的最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点,通过这个属性我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点。 8.**appendChild()**向节点末尾添加一个节点,并返回新增节点。如果传入到appendChild()中的节点已经是文档的一部分了,那相当于将节点剪切了。 9.**insertBefore()**方法将一个新节点插到指定节点前面,并返回这个新节点。这个方法接收两个参数:要插入的节点和作为参照的节点。如果参照节点是null则与appendChild()执行相同结果。insertBefore()同样可以实现剪切。 10.**replaceChild()**方法将一个新节点替换掉原节点,并返回原节点。 11.**removeChild()**方法删除一个节点。 12.***以上四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点(使用parentNode属性)。*** 13.**cloneNode()**方法用于创建节点副本。若传入参数为true,则会进行深复制,即复制节点及其整个子节点树。否则只会复制原节点本身。cloneNode()方法不会复制添加到DOM节点中的JavaScriipt属性,例如事件处理程序等。 15.***document.documentElement指向<html>元素。document.body指向<body>元素。*** 16.通过**document.title**属性可以取得当前页面的标题(并非取得完整的title元素DOM对象),也可以修改当前页面的标题并反映在浏览器的标题栏中。修改title属性的值会改变<title>元素。 17.**URL**属性中包含页面完整的URL,**domain**属性中只包含页面的域名,而**referrer**属性中则保存着链接到当前页面的那个页面的URL。所有这些信息都存在于请求的HTTP头部。这三个属性中只有domain是可以设置的,但由于安全方面的限制,也并非可以给domain设置任何值。如果URL中包含一个子域名,则只能将domain设置为其主域名,同时不能将主域名设置为子域名。设置document.domain的意义在于,当页面中包含来自其他子域的框架或内嵌框架时,能够方便地进行相互访问而不受限于跨域安全限制。 18.getElementsByTagName()方法返回的是包含零或多个元素的nodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个‘动态’集合。 19.getElementsByName()方法常用于取得单选按钮。 20.document.implementation.hasFeature()方法用于检测浏览器是否支持给定的实现部分以及所支持的版本。通常还是要搭配能力检测使用。 21.document.write()和document.writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符串的末尾添加一个换行符(\n). ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOCUMENT.WRITE() TEST</title> </head> <body> <p>the Curent date and time is: <script> document.write('<strong>'+(new Date().toString())+'</strong>'); </script> </p> <script> </script> </body> </html> ~~~ 这个例子展示了在页面加载过程中输出当前日期和时间的代码。此外,还可以使用write()和writeln()方法动态地包含外部资源,例如Javascript文件等(必须做转义处理)。 **如果在文档加载结束后(如window.onload事件之后)再调用document.write(),那么输出的内容将会重写整个页面。** 22.所有元素对象都有的常用属性包括:id、title、className,它们也都是可修改的。 23.与特性相关的方法有三个setAttribute()、getAttribute()、removeAttribute()。 有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不同。第一类特性就是style,在通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会 返回一个对象。第二类特性是onclick这样的事件处理程序。如果通过getAttribute()访问返回的是相应的字符串,而在访问onclick属性时返回的是一个JavaScript函数或null。 24.创建元素节点:document.createElement(),接受一个表示要创建的标签的字符串,如'div'。 25.创建文本节点:document.createTextNode();通过nodeValue属性修改文本节点。 26.normalize()方法用于格式化处理文档树中的文本节点(包括空文本节点或接连出现的两个文本节点等情况)。而splitText()与前者相反,这个方法会按照指定的位置分割nodeValue值。 27.**NodeList及其近亲NamedNodeMap和HTMLCollection这三个集合都是动态的,而不是某个时间节点生成快照。换句话说,每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的消息。从本质上说,所有NodeList对象都是在访问DOM文档时实时运行的查询。(不失时机地缓存NodeList对象的长度是处理这种特性的一种技巧)** ~~~ var divs = document.getElementsByTagName("div"); alert(divs instanceof HTMLCollection); //true (chrome中返回false,divs是NodeList对象) var div = document.getElementById("div1"); var children = div.childNodes; //获取div元素子节点集合 alert(children instanceof NodeList); //true var attrs = div.attributes; //获取div元素的特性 alert(children instanceof NamedNodeMap); //true ~~~