<!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. bzoj2338

    计算几何 我们先把所有的线段求出来,我们发现只有两个线段等长且中点重合时才能构成矩形,那么线段有n*n条,我们按中点,长度排序,然后对于一条线段扫描所有符合条件的线段计算答案,这样看起来是O(n^3) ...

  2. Python---scikit-learn(sklearn)模块

    Python在机器学习方面一个非常强力的模块---scikit-learn模块,它作为数据挖掘和数据分析方面的一个简单而有效的工具,主要包括6大功能:分类(Classification),回归(Reg ...

  3. java编程中的断言工具类（org.springframework.util.Assert）

    转自:https://blog.csdn.net/gokeiryou263/article/details/19612471 断言工具类:Assert类, java.lang.Object ---&g ...

  4. 2-4 原生小程序 - 自带组件及API

    获取用户的信息有两种,一种是不需要登录的,我们只需要获取用户的头像,还有微信的名.还有一种是登录的,就是登录后台校验的,就是获取用户的openid. webview,可以内嵌一个网页,类似于原生的开发 ...

  5. 私有CA和证书

    证书类型 证书授权机构的证书 服务器 用户证书 获取证书两种方法 使用证书授权机构: 生成签名请求(csr ) 将csr发送给CA 从CA处接收签名 自签名的证书: 自已签发自己的公钥 openSSL ...

  6. asp.net mvc6学习资料整理

    十分钟轻松让你认识ASP.NET MVC6 http://www.cnblogs.com/n-pei/p/4272105.html ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web ...

  7. 【转载】HTTP协议详解

    [本文转自]http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html 一.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规 ...

  8. bzoj 1999: [Noip2007]Core树网的核【树的直径+单调队列】

    我要懒死了,所以依然是lyd的课件截图 注意是min{max(max(d[uk]),dis(u1,ui),dis(uj,un))},每次都从这三个的max里取min #include<iostr ...

  9. /usr/lib64/python2.6/lib-dynload/pyexpat.so: symbol XML_SetHashSalt, version EXPAT_2_0_1_RH not defined in file libexpat.so.1 with link time reference

    解决方法:[root]$cd /usr/lib64/python2.6/lib-dynload[root]$ln -s /lib64/libexpat.so.1.5.2 libexpat.so.0[r ...

  10. 【BZOJ4059】Non-boring sequences（分析时间复杂度）

    题目: BZOJ4059 分析: 想了半天没什么想法,百度到一个神仙做法-- 设原数列为 \(a\),对于每一个 \(i\) 求出前一个和后一个和 \(a_i\) 相等的位置 \(pre[i]\) 和 ...