zoukankan      html  css  js  c++  java
  • dom 获取页面的宽 高 DOM获取元素节点的4中方法 上课随笔

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript" src="08.14.js"></script>
    </head>
    
    <body>
    <!--
        快捷键Ctrl+Shift+/
        跳转路径;locatio
    跳转百度路径
    
    
    location.href ='http://www.baidu.com';
    window.open ('http://www.baidu.com');
    获取页面的宽度和高度
    
    注意
    var w = screen.availHeight;/*宽度*/
    console.log(w);
    var d = screen.avaiWidth;/*高度*/
    console.log(h);
    Dom操作:
        把html标签的内容分为各种节点;
        文档节点-----标签(document)------body
        元素节点-----内容
        属性节点
        注释节点
    获取元素节点(标签)
        通过id获取:(最常用)
        document.getElementById(id属性值)
        通过标签来获取:
        document.getElementsByTagName(标签名称);//可获取多个标签
        通过name获取值;
        document.getElementsByTagName(name属性值);
        通过class获取值    ;
        document.getElementsByClassName(class属性值);(不推荐)    
        注;收集的元素都是以字符串的形式返回
      获取文本节点(Nodes; 节点)
      获取值
      var dd = documen.gerElementsByTagName('div')[0].innerHTml;
      
      获取兄弟节点;
      firstChild, lastChild: 父节点获得第一个/最后一个子节点
      
      nextSibling;获得下个兄弟节点
          在获取前一个兄弟节点的时候可以试用
          nextSibling   会匹配字符,包括换行和空格,而不是节点。
          nextElementSibling   会直接匹配节点
          
      previousSibling;获得上一个兄弟节点
              在获取前一个兄弟节点的时候可以使用
              previousSibling    会匹配字符 ,包括换行和空格,而不是节点。
              previousElementSibling   会直接匹配节点
              
      childNodes;父节点获得内部全部的子节点信息
    
    
    通过ID获取的值
    -->
    <!--
    <input type="text" class=input_c name="input_n"id="uesr">
    <input type="text" class=input_c name="input_name"id="wesd">
    <input type="text" class=input_c name="input_name"id="asdz">
    <input type="text" class=input_c name="input_name"id="xcas">
    <input type="text" class=input_c name="input_name"id="zsxc">
    <button onClick="tijiao()">提交</button>
    -->
    <ul id="names">
        <li id="n1">张三</li>
        <li id="n2">李四</li>
        <li id="n3">王五</li>
        <li id="n4">赵六</li>
        <li id="n5">小红</li>
        <li id="n6">小明</li>
    </ul>
    
            <input type="button" value="父节点" onClick="showContent(current.parentNode)">
            <input type="button" value="第一个子节点" onClick="showContent(current.parentNode.firstChild.nextSibling)">
            <input type="button" value="上一个节点" onClick="showContent(current.previousSibling.previousSibling)">
            <input type="button" value="下一个节点" onClick="showContent(current.nextSibling.nextSibling)">
            <input type="button" value="最后一个子节点" onClick="showContent(current.parentNode.lastChild.previousSibling)">
            <input type="button" value="得到所有li的元素个数" onClick="showCount()">
            <script type="text/javascript">
    
        
    </script>
    
    
    </body>
    </html>
  • 相关阅读:
    JVM运行内存分配和回收
    关于评审--从思想到落地
    从浏览器或者Webview 中唤醒APP
    控制台的艺术(附原理实现)
    深入研究嵌入式web服务器的视频监控应用
    css中url的路径含义及使用
    epoll
    C++中智能指针的设计和使用
    wget命令的使用
    UPNP
  • 原文地址:https://www.cnblogs.com/ZDSGWXS233/p/11364317.html
Copyright © 2011-2022 走看看