DOM节点层次（Document类型）

最新推荐文章于 2022-08-24 15:25:05 发布

github@niexia

最新推荐文章于 2022-08-24 15:25:05 发布

阅读量404

点赞数

分类专栏： JavaScript 文章标签： html dom document类型

本文链接：https://blog.csdn.net/niexia_/article/details/77648844

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

2.Document类型

在浏览器中，document对象是Document类型的一个实例，表示整个HTML页面。同时它也是window对象的一个属性，因此可以将其作为全局对象来访问。

Document的特征：

nodeType的值为9
nodeName的值为”#document”
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null
其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Coment

（1）.文档的子节点

子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Coment。

document对象所具有的属性：

documentElement属性
始终指向页面中的<html>元素，可以通过它或者childNodes列表来访问<html>

var html=document.documentElement;//取得对<html>的引用
alert(html===document.childNodes[0]);//true
alert(html===document.firstChild);//true

body属性
直接指向<body>元素

（2）.文档信息

title属性
包含<title>属性中的文本
URL、domain和referrer属性

//取得完整的URL
var url=document.URL;
//取得域名
var domain=document.domain;
//取得来源页面的URL
var referrer=document.referrer;

（3）.查找元素( 重要）

getElementsById( )
接收一个参数，就是要取得元素的ID

<div id="myDiv">some text</div>
var div=document.getElementsById("myDiv");

getElementsByTagName( )
接收一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList。在HTML中这个方法会返回一个HTMLCollection的对象

var images=document.getElementsByTagName("img");
alert(images.length);//输出图像的数量
//可以用方括号语法或item()方法来访问HTMLCollection中的项
alert(images[0].src);//输出第一个图像元素的src特性
alert(images.item(0).src);//输出一个图像元素的src特性
var allElements=document.getElementsByTagName("*");//传入*号 取得所有元素

getElementsByName()
返回带有给定name特性的所有元素。最常用的是取得单选按钮。返回的也是一个HTMLCollection

<fieldset>
//单选按钮的name特性值都是color，确保三个值中只有一个被发送给服务器，id则是将input和label对应
    <legend>Which color do you want</legend>
        <ul>
            <li>
                <input type="radio" value="red" name="color" id="colorred">
                <label for="colorred">Red</label>
            </li>
            <li>
                <input type="radio" value="green" name="color" id="colorgreen">
                <label for="colorgreen>">green</label>
            </li>
            <li>
                <input type="radio" value="blue" name="color" id="colorblue">
                <label for="colorblue">blue</label>
            </li>
        </ul>
</fieldset>
var radios=document.getElementByName("color");

（4）DOM一致性检测

检测浏览器实现了DOM的哪些部分或者说功能是很重要的。这个活由document.implementation.hasFeature( )来完成

var hasXmlDom=document.implementation.hasFeature("XML","1.0");

（5）.文档写入

write()

<body>
    <p>The current date and time is:
        <script>
            document.write("<strong>"+(new Date()).toString()+"</strong>");
            //输出当前日期和时间，日期被包含在一个<strong>元素中，就像在普通HTML页面中一样
        </script>
    </p>
</body>

writeln()
它和write()的区别就是会在字符串的末尾添加一个换行符(\n)

github@niexia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM节点层次（Document类型）

2.Document类型在浏览器中，document对象是Document类型的一个实例，表示整个HTML页面。同时它也是window对象的一个属性，因此可以将其作为全局对象来访问。Document的特征：nodeType的值为9nodeName的值为”#document”nodeValue的值为nullparentNode的值为nullownerDocument的值为null其子节点可
复制链接

扫一扫