zoukankan      html  css  js  c++  java
  • DOM-访问元素

    • id:元素在文档中唯一标识符。
    • title:有关元素的附加说明信息,一般通过工具提示条显示出来。
    • lang:元素内容的语言编码,很少使用
    • dir:语言方向,职位“Ltr”(从左至右)、Rtl(从右至左),很少使用。
    • className:与元素的calss特性对应,即为元素指定的CSS类样式。

    访问元素

      1.getElementById()方法

        使用getElementById()方法可以准确的获取文档中指定元素

        document.getElementById(ID);

        参数ID表示文档中对应元素的id值。如果文档中不存在指定元素,则返回null。该方法只适用于document对象。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    </head>
    <body>
        
        <p id="attr">世界之大,无奇不有</p>
    <ul>
    
    </ul>
    <script>
       var box= document.getElementById("attr");   //获取元素
       var nodename=box.nodeName;      //获取节点名称
       var nodetype=box.nodeType;      //获取节点类型
       var nodeparent=box.parentNode.nodeName;   //获取该节点的父节点
       var nodechilde=box.childNodes[0].nodeName; //获取该节点的父节点

    alert("节点名称"+nodename+"节点类型"+nodetype+"父节点"+nodeparent+"子节点"+nodechilde); </script> </body> </html>

    2.getElementsByClassName()方法

      此方法获取的是元素的calss属性,从函数的名字可以知道,通过getElementsByClassName获取到的是一个数组,包括多个DOM元素,所以要执行DOM元素的方法,必须加一个索引,比如document.getElementsByClassName("class名")[0]。

      而由于id是唯一的,所以通过getElementById只有一个DOM元素,可以直接调用DOM方法。

      document.ElementsByClassName(class);

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    </head>
    <body>
        
        <p id="attr" class="ff">世界之大,无奇不有</p>
    <ul>
    
    </ul>
    <script>
       var box= document.getElementsByClassName("ff")[0];   //获取元素第一个
       var node=box.nodeName;
       alert(node);
    </script>
    </body>
    </html>

    3.使用getElementByTagName()方法

      使用此方法可以获取指定标签名称的所有元素

      document.getElementByTagName(tagName);

      参数tagName表示指定名称的标签,该方法返回值为一个几点的集合,使用length属性可以获取集合中包含元素的个数,利用下标可以访问其中某个元素的对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    </head>
    <body>
        
        <p id="attr" class="ff">世界之大,无奇不有</p>
    <ul>
    
    </ul>
    <script>
      var box=document.getElementsByTagName("p")[0];    //获取标签为p的第一元素;
      alert(box.innerHTML);
    
    </script>
    </body>
    </html>
    

      

     

     

  • 相关阅读:
    js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
    mysql存储emoji问题
    windows环境下 php 将office文件(word/excel/ppt)转化为pdf
    javascript 获取多种主流浏览器显示页面高度
    iframe 加载外部资源,显示隐藏loading,onload失效
    ubuntu 忽略文件的50unattended升级问题
    ubuntu apt 软件源的更改
    Python3.6连接mysql(一)
    H5图片预览、压缩、上传
    前端如何上传图片到七牛云
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10600890.html
Copyright © 2011-2022 走看看