HTMLDocument的变化和插入标记

最新推荐文章于 2022-08-08 15:04:09 发布

gxgalaxy

最新推荐文章于 2022-08-08 15:04:09 发布

阅读量452

点赞数 1

分类专栏： java 前端

本文链接：https://blog.csdn.net/gxgalaxy/article/details/102511884

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

java

2 篇文章 0 订阅

订阅专栏

HTMLDocument的变化

HTML５扩展了HTMLDocument，新增了一些新的功能。

readyState属性

使用document.readyState最恰当的方式，就是通过他来实现一个指示文档已经加载完成的指示器。有四个返回值，以下两个返回值比较常见：

loading,正在加载文档
complete，已经加载完文档

if (document.readyState == "complete"){
	//执行操作
}

兼容模式

为了区分渲染页面的模式是标准的还是混杂的，为此ＩＥ给document添加了一个compatMode的属性。告诉开发人员浏览器采用了哪种渲染模式。

标准模式下，值为"CSS1Compat"
混杂模式下，值为"BackCompat"

if(document.compatMode == "CSS1Compat"){
	alert("Standards mode");
}else{
	alert("Quirks mode");
}

head属性

引用文档的元素

var head = document.head　|| document.getElementsByTagName("head")[0];

插入标记

innerHTML属性

在读模式下，返回和调用元素的所有子节点（包括元素、注释、文本节点）对应的HTML标记
在写模式下，会根据指定的值创建新的DOM树，然后用这个DOM树完全替换原来的所有子节点
例子：

<body>
    <div id="content">
        <p>this is a <strong>test </strong>hello</p>
        <!-- 注释 -->
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
    <input type="button" onclick="getInnerHTML()" value="点击" />
    <script type="text/javascript">
        function getInnerHTML(){
            alert(document.getElementById("content").innerHTML);
        }
    </script>
</body>

返回的内容如下：

        <p>this is a <strong>test </strong>hello</p>
        <!-- 注释 -->
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>

gxgalaxy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLDocument的变化和插入标记

HTMLDocument的变化HTML５扩展了HTMLDocument，新增了一些新的功能。readyState属性使用document.readyState最恰当的方式，就是通过他来实现一个指示文档已经加载完成的指示器。有四个返回值，以下两个返回值比较常见：loading,正在加载文档complete，已经加载完文档if (document.readyState == "comp...
复制链接

扫一扫