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 ...
随机推荐
- bzoj 1047: [HAOI2007]理想的正方形【单调队列】
没有复杂结构甚至不长但是写起来就很想死的代码类型 原理非常简单,就是用先用单调队列处理出mn1[i][j]表示i行的j到j+k-1列的最小值,mx1[i][j]表示i行的j到j+k-1列的最大值 然后 ...
- 使用 script 的 module 属性实现 es6 以上的兼容
几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来 ...
- TestNG设置用例循环执行
曾经做过一需求,需要单个集成测试用例循环执行N次,或许你会说for循环就可以了,这当然是可以的.那有没有逼格更高点的方法,当然也是有的.下面我们就说下使用TestNG注解功能实现用例的循环执行. 1. ...
- 2019 第三届强网杯线上赛部分web复现
0x00前言 周末打了强网杯,队伍只做得出来6道签到题,web有三道我仔细研究了但是没有最终做出来,赛后有在群里看到其他师傅提供了writeup和环境复现的docker环境,于是跟着学习一波并记录下来 ...
- Java多线程（二） synchronized 针对对象进行锁定
http://www.cnblogs.com/QQParadise/articles/5059824.html 1.方法内的变量为线程安全的 2.实例变量非线程安全的 public class Has ...
- 2017西安网络赛B_Coin
样例输入 2 2 1 1 3 1 2 样例输出 500000004 555555560 思路: n重伯努利实验概率分布题. 设q=1-p,p为事件概率. Y为出现偶数次的概率. 所以 Y=1/2*( ...
- ACM_闹钟人生（水题）
闹钟人生 Time Limit: 2000/1000ms (Java/Others) Problem Description: 已知一个时钟一开始指向0点,顺时针走了n个小时,求它最终所指向的数字(时 ...
- 滚动时sticky nav
参考w3c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- oracle添加联合主键
1 alter table tablename add constraint unionkeyname primary key (column1,column2); 上面语句中: tablename为 ...
- 使用openssl搭建CA并颁发服务器证书
本来整理了一份执行脚本,但是没有找到附件功能.只好直接贴当时自己看过的链接了. 文章标题:Openssl Certificate Authority 转载链接:https://jamielinux.c ...