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 ...
随机推荐
- POJ2187 Beauty Contest （旋转卡壳算法 求直径）
POJ2187 旋转卡壳算法如图 证明:对于直径AB 必然有某一时刻 A和B同时被卡住 所以旋转卡壳卡住的点集中必然存在直径 而卡壳过程显然是O(n)的 故可在O(n)时间内求出直径 凸包具有良好的性 ...
- Java中的super关键字何时使用
子类的构造函数中不是必须使用super,在构造函数中,如果第一行没有写super(),编译器会自动插入.但是如果父类没有不带参数的构造函数,或这个函数被私有化了(用private修饰).此时你必须加入 ...
- Tomcat的jvm配置
Tomcat本身不能直接在计算机上运行,需要依赖于操作系统和一个JAVA虚拟机.Tomcat的内存溢出本质就是JVM内存溢出,JAVA程序启动时JVM会分配一个初始内存和最大内存给程序.当程序需要的内 ...
- SVG Path标签 A 参数
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx:x轴半径ry:y轴半径x-axis-rotation:指椭圆的X轴与水平方向顺时针方向夹 ...
- 2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛-K-Matrix Multiplication（矩阵乘法）
题目描述 In mathematics, matrix multiplication or matrix product is a binary operation that produces a m ...
- view 的继承关系
view 的继承关系 如果一个view 有多个子view. 甚至是多成次的 子view. 只需要把第一级别的view(父view) 授权给用户,就可以访问view了,子view 不需要授权.
- tablespace monitor shell for windows
1. #! /bin/ksh #set -x SID=$1 ORACLE_SID=stat10gORACLE_HOME=/oracle10g/product/10.2PATH=$PATH:/usr/b ...
- python调用chrome ie等浏览器
chrome: 首先,要安装下谷歌浏览器,查看谷歌浏览器的版本,对应版本下载相应的chromedriver插件,http://blog.csdn.net/huilan_same/article/det ...
- 设计模式（"大话设计模式"读书笔记 C#实现）
前言:毫无疑问 ,学习一些设计模式,对我们的编程水平的提高帮助很大.写这个博客的时候自己刚开始学习设计模式,难免有错,欢迎评论指正. 我学设计模式的第一本书是“大话设计模式”. 1.为什么要学设计模式 ...
- Java虚拟机内存详解
概述 Java虚拟机会自动管理内存,不容易出现内存泄漏和内存溢出问题.Java虚拟机会在执行过程中将管理的内存分为若干个不同的数据区域. 运行时数据区域 在jdk1.8之前的版本与1.8版本略有不同, ...