js之DOM直接操作
2024-09-07 23:11:26
<!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>
最新文章
- Apworks框架实战(六):使用基于Entity Framework的仓储基础结构
- 2016年10月30日--JavaScript语法
- Objective-C类成员变量深度剖析
- require.js js模块化方案
- C语言动态生成二维数组
- i++ 与 ++i 的从字节码层面看二者的区别
- jetty插件配置(开发)
- Python关键字yield的解释
- 【2017-04-18】Ado.Net C#连接数据库进行增、删、改、查
- MySQL两阶段提交
- THINKPHP 调试------输出sql语句
- Log4j Append属性指定是否追加内容
- go thrift报错问题--WriteStructEnd
- 使用 urllib 处理 Cookies 信息
- 1、初始Java应用程序
- python查询mysql以字典返回
- sql游标使用
- 通过 cygwin64 自己编译对应的 Tera Term cyglaunch.exe
- CUDA库函数module management
- LinuxShell脚本编程基础5--数值,字符串,文件状态测试,((..))和[[..]]的使用
热门文章
- Controller控制器的使用
- Yii2笔记一
- CodeForces 632C Grandma Laura and Apples (模拟)
- 转】 Spark SQL UDF使用
- 生成清除某个数据库下的所有表的SQL语句
- RabbitMQ指南之五:主题交换器(Topic Exchange)
- LN : leetcode 53 Maximum Subarray
- BPI-MI1刷Andorid的启动卡之后上网的步骤(以太网&;&;WIFI)
- EditPlus里面自带有更改文件编码的功能
- Farseer.net轻量级开源框架 中级篇:事务的使用