js之DOM直接操作
<!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直接操作的更多相关文章
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
- JS对DOM的操作优化法则
html页面显示过程 解析HTML,并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息,比如box的位置与尺寸 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- Js 对Dom的操作
一.DOM的概述 DOM(Document Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.这使得JavaScript操作HTML,不是在 ...
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- JS对DOM节点操作整理
获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...
- Js:DOM对象操作常用的方法和属性
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
随机推荐
- 10 探索其他Excel对象
10.1 产生一个好的第一印象 10.1.1 为我们的世界着色 rgb(red:=[0,225],green:=[0,225],blue:=[0,225]) 此函数生成一个表示颜色的整数.VBA预定义 ...
- 常用的八大排序算法,含java实例(copy)
说明:转载于http://www.cnblogs.com/qqzy168/archive/2013/08/03/3219201.html 分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序( ...
- Varnish的VCL
Varnish的子进程 VCL Varnish配置语言VCL是一种"域"专有类型的配置语言,用于描述Varnish Cache的请求处理和文档高速缓存策略. 当加载新配置时,Man ...
- php insteadof 作用
PHP5的另一个新成员是instdnceof关键字.使用这个关键字可以确定一个对象是类的实例.类的子类,还是实现了某个特定接口,并进行相应的操作.在某些情况下,我们希望确定某个类是否特定的类型,或者是 ...
- 【JS】温故知新: 从parseInt开始
工作中,几乎习惯了大量使用方便的工具库(如underscore.lodash),但是长期的依赖,却有可能在我们注意不到的地方出现黑天鹅,笔者最近就碰到了这样一件例子: parseInt(9e-10); ...
- HDU 4691 后缀数组+RMQ
思路: 求一发后缀数组,求个LCP 就好了 注意数字有可能不只一位 (样例2) //By SiriusRen #include <bits/stdc++.h> using namespac ...
- 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案
在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...
- LN : leetcode 258 Add Digits
lc 258 Add Digits lc 258 Add Digits Given a non-negative integer num, repeatedly add all its digits ...
- Elasticsearch--扩展索引结构
目录 索引树形数据 索引非扁平数据 索引关系型数据 使用嵌套对象 评分与嵌套查询 使用主从关系 索引树形数据 使用path_analyzer分析树形数据字段 索引非扁平数据 数据如下: { " ...
- Android 知识Tips
有一些Android很小的知识点,不值得单独写出来做为一篇博客.都在这个博客里面进行总结 1.ImageButton控件,中间图片的放置效果可以用scaleType来设置,如下: <ImageB ...