JavaScript高程学习——DOM(二)

    xiaoxiao2025-03-20  18

    上一篇介绍了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()相反的方法。这样就会使节点从指定节点分成两个节点。

    ——END——

    最新回复(0)