HTML5权威指南读书笔记17（第26章）-Document对象，location，hash，cookie，ready，使用属性获取元素，数组标记元素，搜索元素，使用css搜索，链式搜索，Dom中导航

最新推荐文章于 2023-08-03 21:05:26 发布

心湖中的石子

最新推荐文章于 2023-08-03 21:05:26 发布

阅读量214

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110150679

版权

html5 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、概述

在这里插入图片描述

2、使用docuement元数据

在这里插入图片描述

<head>
    <style type="text/css">
      
    </style>  
    <title>我是title</title>  
</head>
<body>
    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div>  
    <script type="text/javascript">
        document.writeln("url:"+document.URL);
        document.writeln("defaultCharset:"+document.defaultCharset);
        document.writeln("dir:"+document.dir);
        document.writeln("domain:"+document.domain);
        document.writeln("lastModified:"+document.lastModified);
        document.writeln("referrer:"+document.referrer);
        document.writeln("title:"+document.title);

    </script>
</body>

3、Location对象

在这里插入图片描述

<head>
    <style type="text/css">
      
    </style>  
    <title>我是title</title>  
</head>
<body>
    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div>  
    <script type="text/javascript">
        document.writeln("protocol:"+document.location.protocol);
        document.writeln("host:"+document.location.host);
        document.writeln("hostname:"+document.location.hostname);
        document.writeln("port:"+document.location.port);
        document.writeln("pathname:"+document.location.pathname);
        document.writeln("search:"+document.location.search);
        document.writeln("hash:"+document.location.hash);

    </script>
</body>

打印
protocol:http: host:127.0.0.1 hostname:127.0.0.1 port: pathname:/index1.html search: hash:

4、Location.hash导航到其他地方

这里hash到的是一个id上

<body>
    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div> 
    <button id="mybut">跳转</button>
    <div>
        <img id="myimg" src="./images/gril03.jpg"/>
    </div> 

    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div> 
    <script type="text/javascript">
       document.getElementById("mybut").onclick=function(){
           document.location.hash="myimg";
       }

    </script>
</body>

assign和replace都可以跳转到另外一个页面，但是replace会将当前文档从浏览历史中移除

<body>
    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div> 
    <button id="mybut">跳转</button>
    <script type="text/javascript">
       document.getElementById("mybut").onclick=function(){
           document.location.assign("http://www.sina.com");
       }
    </script>
</body>

5、读取和写入cookie

cookie以名值对的形式呈现，
在这里插入图片描述

<body>
   <div id="cookiedata"></div>
    <button id="write">write cookie</button><br/>
    <button id="update">update cookie</button>
    <script type="text/javascript">
       var cookieCount=0;
       document.getElementById("write").onclick=createCookie;
       document.getElementById("update").onclick=updateCookie;
       readCookie();

       function readCookie(){
            document.getElementById("cookiedata").innerHTML=document.cookie;
       }

       function createCookie(){
            cookieCount++;
            document.cookie="cookie_"+cookieCount+"=value"+cookieCount;
            readCookie();
       }

       function updateCookie(){
            document.cookie="cookie_"+cookieCount+"=update"+cookieCount;
            readCookie();

       }

    </script>
</body>

未能实际实现

6、理解就绪状态document.ready

在这里插入图片描述
利用readyState推迟代码的执行

<head>
    <script type="text/javascript">
        document.onreadystatechange=function(){
            if(document.referrer=="interactive"){
                document.getElementById("press").onclick=function(){
                    document.getElementById("results").innerHTML="button pressed";
                }
            }
        }

    </script> 
</head>
<body>
    <button id="press">press</button>
    <pre id="results"></pre>

</body>

7、使用属性获取元素对象

这里大多数都返回了一个集合
在这里插入图片描述
大多数属性都返回一个htmlCollection对象。代表元素的对象集合

<body>
    <p>这里有一些文字，没有图片之类的东西</p>
    <img id="gril" src="./images/gril03.jpg".>
    <p>住了李发顺丰肯德基石丹凤驾驶肯定</p>
    <img id="ico" src="./images/icon.ico"/>
    <p>其他有没有可执行的东西</p>
    <pre id="results"></pre>
    <script type="text/javascript">
       var myresults=document.getElementById("results");
       var elems=document.images;//拿到一个集合
       for(var i=0; i<elems.length;i++){
           myresults.innerHTML+="image elements:"+elems[i].id+"\n";
       }

       var srcvalue=elems.namedItem("gril").src;
       myresults.innerHTML+="src for gril element is"+srcvalue+"\n";

    </script>
</body>

8、使用数组标记获取以命名元素

说白了就是把元素的id作为数组的键名

<body>
    <p>这里有一些文字，没有图片之类的东西</p>
    <img id="gril" src="./images/gril03.jpg".>
    <p>住了李发顺丰肯德基石丹凤驾驶肯定</p>
    <img id="ico" src="./images/icon.ico"/>
    <p>其他有没有可执行的东西</p>
    <pre id="results"></pre>
    <script type="text/javascript">
       var myresults=document.getElementById("results");
       var elems=document["ico"];
       console.log(elems);
       if(elems.namedItem){
            for(var i=0; i<elems.length;i++){
                myresults.innerHTML+="Image element"+elems[i].id+"\n";
            }
       }else{
           myresults.innerHTML+="src for element is:"+elems.src+"\n";
       }

    </script>
</body>

报错，并找不到elems.namedItem

9、getElementByXXX搜索元素

getElementById()
getelementsByTagName()
getelementsByName()
getelementsByClassName()

10、document.querySelectorAll（）使用CSS选择器获取对象

<body>
    <p>这里有一些文字，没有图片之类的东西</p>
    <img id="gril" src="./images/gril03.jpg".>
    <p>住了李发顺丰肯德基石丹凤驾驶肯定</p>
    <img id="ico" src="./images/icon.ico"/>
    <p>其他有没有可执行的东西</p>
    <pre id="results"></pre>
    <script type="text/javascript">
       var myresults=document.getElementById("results");
       var elems=document.querySelectorAll("p,img#gril");
       myresults.innerHTML=elems.length;
    </script>
</body>

11、链式搜索

获得一个对象后接着get下面的子对象

<body>
    <div id="mytext">
        <p>这里有一些文字，没有图片之类的东西</p>
        <img id="gril" src="./images/gril03.jpg".>
        <p>住了李发顺丰肯德基石丹凤驾驶肯定</p>
        <img id="ico" src="./images/icon.ico"/>
        <p>其他有没有可执行的东西</p>
        <p>其他有没有可执行的东西</p>
    </div>  
    <pre id="results"></pre>
    <script type="text/javascript">
       var myresults=document.getElementById("results");
       var elems=document.getElementById("mytext").querySelectorAll("p,img#gril");
       myresults.innerHTML=elems.length;
    </script>
</body>

12、在Dom树中导航

在这里插入图片描述

<body>
    <div id="mytext">
        <p>这里有一些文字，没有图片之类的东西</p>
        <img id="gril" src="./images/gril03.jpg".>
        <p id="myp">住了李发顺丰肯德基石丹<img id="ico" src="./images/icon.ico"/>凤驾驶肯定</p>
        
        <p>其他有没有可执行的东西</p>
        <p>其他有没有可执行的东西</p>
    </div>  
    <pre id="results"></pre>
    <script type="text/javascript">
       var myresults=document.getElementById("results");

       var ico=document.getElementById("ico");
       var myptext=ico.parentNode;
       console.log(myptext.innerText); 
       
    </script>
</body>