本文主要探讨了JavaScript中的Document类型，包括文档子节点的访问、文档信息、查找元素和文档写入。详细介绍了documentElement、childNode列表以及各种查找元素的方法如getElementsByTagName、getElementById和getElementByName。此外，还涉及了Element类型的属性访问、设置和删除，以及Text类型节点的文本操作。文章还指出在不同浏览器中处理DOCTYPE属性时存在的差异，并提醒开发者注意这些差异可能带来的兼容性问题。
上一篇介绍了Node类型，那么这一篇我们来继续介绍其他的类型
Document类型
在JavaScript中，document类型表示文档，根据上一篇我们知道，document的对象是HTMLDocument（继承自Document类型），表示整个HTML实例。
//接下来是一些其本身的属性：
nodeType=9
nodeName=#document
nodeValue=null
parentNode=null
ownerDocument=null
其子节点可能是Document、Element、ProcessingInstruction或Comment。
1.文档的子节点
其子节点可能是Document、Element、ProcessingInstruction或Comment。
除了上面的子节点还有两个内置的访问其子节点的快捷方式。
documentElement和childNode列表访问文档元素
该属性始终指向HTML文档中的<html>元素。
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
var html = document.documentElement;
alert(html === document.childNodes[0]);
alert(html === document.firstChild);
</script>
</body>
</html>
由上面的可以看出来documentElement、firstChild和childNodes[0]的属性值相同，都指向
<html>
除此之外，document对象还有一个body属性，直接指向<body>元素
与之类似的还有document.doctype
其访问的是<!DOCTYPE>
但是这个方法在不同浏览器中的反应不尽相同
在IE8以前的版本中文档类型声明会被解释为一个注释并且把它当做Comment节点，其值也就始终为null了；
IE9+和Firefox：如果存在文档类型说明（<!DOCTYPE>）浏览器将会把它当做文档的第一个子节点
Safari、Chorme和Opera：如果存在文档类型说明，会将其解析，但是不会作为文档的子节点。
** 由此可知，这个属性在不同的浏览器中使用时，会有不同的反应，故此这个的属性会有局限性。**
在这里，我想提出一个问题，就是
<!-- 第一条注释-->
<html>
<body>
</body>
</html>
<!-- 第二条注释-->
问题：这段代码有几个子节点？分别是什么？
IE8及以前版本：3个(只会为第一个注释创建节点)
IE9及更高版本：4个(会为两个注释都创建节点)
Firefox以及Safari3.1之前版本：2个（会完全忽略这两个节点）
2.文档信息
//取得完整的URl
document.URL
//取到域名
document.domain
//取得来源页面的URL
document.referrer
domain在页面上传到服务器时才可以使用，而URL在本地时也可以使用。
使用domain时有几点需要注意：
1.不能设置URL中不包含的域
2.一开始是概括的的，后面设置时就不能设置比前面更详细的的域名
3.查找元素
getElementsByTagName();(接收的参数为元素的标签名)
getElementById();（接受的参数为元素的ID属性）
getElementByName();（接受到的参数为元素的name的属性值）
当第一种方法接收到的参数为*时，星号表示全部元素。
这三种方法是最常用的方法来查找元素。
而第二种方法在IE7及之前会返回name属性的元素。
即在文档中，有一个ID属性，和一个与ID属性值相同的name属性元素，那么在查找元素时，就会将它们同时返回。就会导致查找不精确的问题。
而这第三种方法只能在HTMLDocument类型才有的方法。即只有存在Name属性才可以使用这种方法。
4.文档写入
文档写入一共有四种方法：write()、writeln（）、open（）、close（）。
区别：write和wroteln是两种差不多的方法，但是在写入文档时，writeln会比write多产生一个换行符。
open()和close()是打开和关闭文档的输出流。基本很少使用。
Element类型
nodeType=1;
nodeValue=null;
nodeName=元素标签名；
parentNode=Element或Document;
子节点：Element,ProncessingInstruction,CDATASection或EntityReferfence.
访问标签名 ：nodeName属性\ tagname属性
var div=document.getElementByid("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName==div.nodeName); //true
上面的代码表示元素标签名等于元素节点名。
元素的某些属性信息可以由JS代码直接获取（只有公认的属性才会可以由JS代码直接获取）
var div= document.getElementById("div");
alert(div.id); //"div"
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"
与此同时，我们也可以为其设置新的值，便可以修改对应的每个特性。
取得属性
每一种元素都有其相应一种或多种特性，这些特性的用途是给出相应元素或其内容的附加信息。
在DOM中，有这样几种方法可以操作这些特性。
getAttribute（）; //查
setAttribute（）; // 添 Or 改
removeAttribute（）; // 删
首先，我们来说一下 查 getAttribute()这个东西。
注意：特性的名称是不区分大小写的，即"ID"和"id"表示的是同一种特性。
看下面的这段代码
具体使用方法为someNode.getAttribute(“所需获取的元素属性”)
注意： 有两类特性对应的属性名， style和onclick这样的事件处理程序
好了，我们现在已经可以查到了某个元素的具体属性值了，现在我们想要改变它，或者在它之后添加一点新的东西。那该怎么办呢？？？
这时，我们就可以搬出我们的setAttribute()。
使用这种方法，需要注意两种情况：
①：要设置的元素的特性名和值原来已经存在，那么这种方法将会修改它本身。
②：要设置的元素的特性名和值原来在文档中不存在，那么这种方法将会添加新的元素，这个元素有着独特的特性名以及值。
最后一种是删除特性的工具removeattribute()
attribute属性
Element类型是使用attribute属性中包含一个NamedNodeMap,与Nodelist类似，也是个“动态”的集合。元素的每个特性都由一个Attr节点表示，每个节点保存在NameNodeMap对象中。
NameNodeName对象的方法为：
- getNameItem(name):返回nodeName属性等于name的节点；
- removeNameitem(name)：从列表中移除nodeName属性等于name的节点；
- setNameItem(node):向列表中添加节点，以节点的nodeName属性为索引；
- item（pos）:返回位于数字pos位置处的节点。
创建元素
使用Document.createElement()方法可以创建新元素。该方法只接受一个参数，即需要创建元素的标签名。
这个标签名在HTML文档里不区分大小写。
在使用createElement（）方法创建新元素的同时，也为新元素设置了ownerDocument属性。所以，在这个基础上没我们还可以操作元素的特行，为它添加更多子节点，以及执行更多操作。
div.id=" myNewDiv";
div.className="box";
document.body.appendChild(div);
Text类型
text节点有以下几种特征：
nodeType=3;
nodeName=#text;
nodeValue的值为其所包含的文本
parentNode是一个Element；
没有子节点；
可以通过NodeValue属性或Data属性访问Text节点包含的文本。
- appendData(text):
- deleteData(offset,count)
- insertData(offset,count)
- replaceData(offset,count)
以上几种方法中的offset 都是目标位置偏移量进行操作，count是操作的数量。
1.创建文本节点只需要创建文本节点，在将其差文本节点插入到需要插入的父级元素中即可。
2.切割文本节点只需要使用normalize()相反的方法。这样就会使节点从指定节点分成两个节点。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
