zoukankan      html  css  js  c++  java
  • javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档。在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面。而且在浏览器中document对象还是window对象的一个属性,因此可以作为全局属性来用

    Document节点具有下列特征:

    nodeType=9

    nodeName=”#document”

    nodeValue=null

    parentNode=null

    ownerDocument=null

    其子节点可以使DocumentType类型(仅允许1个),Element(最多1个),ProcessingInstruction,Comment。<html>就是文档中Document类型节点的子节点

    Document表示HTML或其他XML文档。最常见的还是作为HTMLDocument实例的document对象,通过该文档对象,不仅可以操作页面信息,还可以操作页面外观及背景结构。

    1、文档子节点:DocumentType类型(仅允许1个),Element(最多1个),ProcessingInstruction,Comment。有两个内置访问子节点的属性

    documentElement属性,该属性始终指向当前文档的<html>节点

    childNodes属性,访问文档子节点。显然在文档中childNodes列表下只有一个html元素


    作为HTMLDocument的实例,document还有一个始终指向<body>的属性:document.body;

    alert(document.body.nodeName);//BODY

    输出BODY,通过document对象指向body。


    Document另一个可能的子节点为DocumentType。通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体,通过document的doctype属性来访问它的信息。//不同浏览器对该属性的支持不同

    2、文档信息

    document作为HTMLDocument的对象,还有一些特有的属性。

    title属性:包含着title中的文本。可以使用document.title来修改标题内容,这样只会在浏览器显示中修改,而实际文档中的内容则不变

    url属性:完整的URL,地址栏中显示的url。

    domain属性:只包含页面的域名

    referrer属性:包含着链接到当前页面的来源页面的url,如果当前页是起始页,则为空字符串

    <html>
      <head>
        <title>Test</title>
      </head>
      <body>
        <p id="pd" name="test"><!--注释--></p>
        <script type="text/javascript">
          alert(document.title);//Test
          var url=document.URL;
          var domain=document.domain;
          var referrer=document.referrer;
          alert(url);//当前页面的存储位置
          alert(domain);//
          alert(referrer);//
        </script>
      </body>
    </html>

    由于是静态页面,没有发布到服务器,所以域名和来源页的url都为空。


    3、查找元素

    最常见的DOM应用就是获取对元素的引用,关于对元素的引用Domcument类型提供了两个方法:getElementById()和getElementByTagName()

    getElementById()方法接收一个参数ID,如果找到相应的ID则返回元素,否则返回null。id即为页面元素的id属性。

    getElementsByTagName()方法接收一个参数标签名,返回的是包含零个或多个元素的NodeList。在HTML文档中,该方法返回一个HTMLCollection对象,该对象和NodeList很类似。

    <p id="pd" name="test">no.1</p>
        <p id="pt">no.2</p>
        <script type="text/javascript">
          alert(document.getElementById("pd").firstChild.nodeValue);//no.1
          alert(document.getElementById("pt").firstChild.nodeValue);//no.2
    
          var pList=document.getElementsByTagName("p");
          for(var i=0;i<pList.length;i++)
          {
            alert(pList.item(i).firstChild.nodeValue);
          }//no.1
          //no.2
        </script>

    4、特殊集合

    document还有一些特殊的集合,这些集合都是HTMLCollection类型:

    document.anchors//返回文档中所有带name属性的<a>元素

    document.forms//返回文档中所有<form>元素

    document.images//返回文档中的所有<image>元素

    document.links//返回所有带href属性的<a>元素

    这些元素始终可以通过HTMLDocument对象访问到。


    5、一致性检测

    检测浏览器实现了DOM的那些部分,可以通过document.implementation属性,DOM1为该属性定义了一个方法hasFeature(),接收两个参数,要检测的DOM功能的名称及其版本号,如果支持返回true。

    alert(document.implementation.hasFeature("XML","1.0"));//true

    6、文档写入

    document具有将输出流写入到文档中去。实现这个功能的方法有write(),writeln(),open(),close().

    write()和writeln()方法接收一个字符串参数,表示写入到文档的字符串,writeln多一个回车符。不能直接写入”</script>”,会直接导致结束。

    open()和close()分别用于打开和关闭文档输出流。

  • 相关阅读:
    jQuery函数继承 $.extend, $.fn.extend
    [原创]茗洋AaronYang的 jquery.myselect.js 我的一次前端突破[上]
    EasyUI 的 combotree 加载数据后折叠起来,并且只允许单击子节点的写法
    判断js数组包是否包含某个元素
    JS中 HTMLEncode和HTMLDecode
    Easyui datagrid 特殊处理,记录笔记
    easyui tab上面添加右键菜单
    第三方文本框 在div中显示预览,让指定节点不受外部css影响
    Easyui 让Window弹出居中
    C# txt格式记录时间,时间对比,决定是否更新代码记录Demo
  • 原文地址:https://www.cnblogs.com/Black-Cobra/p/7456738.html
Copyright © 2011-2022 走看看