zoukankan      html  css  js  c++  java
  • JavaScript--Dom直接选择器

    一、简介

      文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

    二、Dom直接选择器  

      2.1 查找标签

    document.getElementById             根据ID获取一个标签
    document.getElementsByName          根据name属性获取标签集合
    document.getElementsByClassName     根据class属性获取标签集合
    document.getElementsByTagName       根据标签名获取标签集合
    

      2.2 事例 

    <body>
        <div id="i1">冰镇西瓜汁</div>
        <a>aaa</a>
        <a>bbb</a>
        <a>ccc</a>
    </body>
    

      (1)根据ID获取标签  

    tag = document.getElementById('i1')
    <div id=​"i1">​冰镇西瓜汁​</div>​
    

      (2)根据标签名称获取标签(或集合)

    document.getElementsByTagName('a')
    HTMLCollection(3) [a, a, a]
    document.getElementsByTagName('a')[0]
    <a>​aaa​</a>​
    

      (3)使用innerText获取标签内容  

    var tag = document.getElementById('i1')
    undefined
    tag.innerText
    "冰镇西瓜汁"
    

      (4)标签对象.innerText="新值"

      替换原来标签的文本内容  

    var tag = document.getElementById('i1')
    undefined
    tag.innerText = "盖被吹空调"
    "盖被吹空调"
    

      

      (5)循环获取标签集合中的内容 

    var tags = document.getElementsByTagName('a')
    undefined
    for(var i in tags){
        console.log(tags[i].innerText);}
    
         aaa
         bbb
         ccc
    

      

  • 相关阅读:
    ie浏览器报错 DOM7009 无法解码 URL 处的图像 问题的解决方法
    javascript拷贝节点cloneNode()使用介绍
    动态构建 urlpatterns
    request属性
    用户分组权限(模型--登录自带字段)
    模型字段设为可选
    模型 命令
    模板 templates
    动态url加载
    APScheduler实现定时任务
  • 原文地址:https://www.cnblogs.com/bigberg/p/9238856.html
Copyright © 2011-2022 走看看