<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1" >helloworld</div>

    <div >random_lee</div>

    <a  class="body" style="color: wheat">这是一个带颜色的标签</a>

    <a  class="body" style="color: green">这是一个绿色的标签</a>

    <span name="randomlee">sfnsdkvsdji</span>

    <span name="randomlee">2345346456</span>

</body>

<script>

    //获取单个便签 根据id

    var tag=document.getElementById('i1')

    //获取标签的文本内容

    var content=tag.innerText

    console.log(content)

    //赋值操作

    document.getElementById('i1').innerText="重新赋值"

</script>

<script>

    //获取多个标签 根据标签名称

    var tags=document.getElementsByTagName('div')

    //获取到的内容是一个标签的列表

    //通过for循环取出内容

    for (var i=0 ;i < tags.length;i++){

        console.log(tags[i].innerText)

        //赋值操作

        tags[i].innerText="leebaba"

    }

</script>

<script>

    //获取多个标签 根据classname

    var tags=document.getElementsByClassName('body')

    for (var  i = 0 ;i < tags.length;i ++){

        console.log(tags[i].innerText)

        //修改标签

        tags[i].style.color="red"

    }

</script>

<script>

    //获取多个标签 根据自定义属性name

    var tags=document.getElementsByName('randomlee')

    for (var i = 0 ;i<tags.length;i++){

        console.log(tags[i].innerText)

        //修改标签

        tags[i].style.backgroundColor='yellow'

    }

　　/*
　　document.getElementById             　　根据ID获取一个标签

　　document.getElementsByName          根据name属性获取标签集合
　　　document.getElementsByClassName     根据class属性获取标签集合
 
　　　document.getElementsByTagName       根据标签名获取标签集合
　　/*
</script>

</html>

　　

js之DOM直接操作的更多相关文章

  1. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  2. JS对DOM的操作优化法则

    html页面显示过程 解析HTML,并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息,比如box的位置与尺寸 ...

  3. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  4. Js 对Dom的操作

    一.DOM的概述 DOM(Document Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.这使得JavaScript操作HTML,不是在 ...

  5. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  6. JS对DOM节点操作整理

    获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...

  7. Js：DOM对象操作常用的方法和属性

  8. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  9. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

随机推荐

  1. 10 探索其他Excel对象

    10.1 产生一个好的第一印象 10.1.1 为我们的世界着色 rgb(red:=[0,225],green:=[0,225],blue:=[0,225]) 此函数生成一个表示颜色的整数.VBA预定义 ...

  2. 常用的八大排序算法，含java实例(copy)

    说明:转载于http://www.cnblogs.com/qqzy168/archive/2013/08/03/3219201.html 分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序( ...

  3. Varnish的VCL

    Varnish的子进程 VCL Varnish配置语言VCL是一种"域"专有类型的配置语言,用于描述Varnish Cache的请求处理和文档高速缓存策略. 当加载新配置时,Man ...

  4. php insteadof 作用

    PHP5的另一个新成员是instdnceof关键字.使用这个关键字可以确定一个对象是类的实例.类的子类,还是实现了某个特定接口,并进行相应的操作.在某些情况下,我们希望确定某个类是否特定的类型,或者是 ...

  5. 【JS】温故知新: 从parseInt开始

    工作中,几乎习惯了大量使用方便的工具库(如underscore.lodash),但是长期的依赖,却有可能在我们注意不到的地方出现黑天鹅,笔者最近就碰到了这样一件例子: parseInt(9e-10); ...

  6. HDU 4691 后缀数组+RMQ

    思路: 求一发后缀数组,求个LCP 就好了 注意数字有可能不只一位 (样例2) //By SiriusRen #include <bits/stdc++.h> using namespac ...

  7. 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...

  8. LN : leetcode 258 Add Digits

    lc 258 Add Digits lc 258 Add Digits Given a non-negative integer num, repeatedly add all its digits ...

  9. Elasticsearch--扩展索引结构

    目录 索引树形数据 索引非扁平数据 索引关系型数据 使用嵌套对象 评分与嵌套查询 使用主从关系 索引树形数据 使用path_analyzer分析树形数据字段 索引非扁平数据 数据如下: { " ...

  10. Android 知识Tips

    有一些Android很小的知识点,不值得单独写出来做为一篇博客.都在这个博客里面进行总结 1.ImageButton控件,中间图片的放置效果可以用scaleType来设置,如下: <ImageB ...