<!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. 安装完Anaconda python 3.7，想使用python3.6方法

    cmd使用命令: conda create -n py36 python=3.6 anaconda 安装好后,会有提示: To activate this environment, use:# > ...

  2. Java 泛型 四 基本用法与类型擦除

    简介 Java 在 1.5 引入了泛型机制,泛型本质是参数化类型,也就是说变量的类型是一个参数,在使用时再指定为具体类型.泛型可以用于类.接口.方法,通过使用泛型可以使代码更简单.安全.然而 Java ...

  3. java笔记线程方式1等待终止

    public final void join():等待该线程终止 public class ThreadJoinDemo { public static void main(String[] args ...

  4. bzoj 1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛【dp+树状数组+hash】

    最长上升子序列.虽然数据可以直接n方但是另写了个nlogn的 转移:f[i]=max(f[j]+1)(a[j]<a[i]) O(n^2) #include<iostream> #in ...

  5. vue3.0新特性以及进阶路线

    Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...

  6. （数论）51NOD 1135 原根

    设m是正整数,a是整数,若a模m的阶等于φ(m),则称a为模m的一个原根.(其中φ(m)表示m的欧拉函数)   给出1个质数P,找出P最小的原根. Input 输入1个质数P(3 <= P &l ...

  7. MyEclipse无法自动编译项目故障一例

    MyEclipse导入项目后发现无法自动编译,classes目录下没有编译的类. 尝试的解决方法: 1.刷新项目,失败: 2.project->clean-,失败: 3.关闭项目再次打开,失败: ...

  8. c/c++导出lua绑定

    [转载]https://note.youdao.com/share/?id=0f4132271151c4b62f9afb712e8304d9&type=note#/ 1.在纯C环境下,把C函数 ...

  9. python--12、pymysql模块

    安装 pip3 install pymysql 使用方法(示例表为用户注册信息表): import pymysql user=input('username: ').strip() pwd=input ...

  10. Spark学习之基础相关组件（1）

    Spark学习之基础相关组件(1) 1. Spark是一个用来实现快速而通用的集群计算的平台. 2. Spark的一个主要特点是能够在内存中进行计算,因而更快. 3. RDD(resilient di ...