javascript中DOM获取和设置元素的内容、样式及效果
getElementById() 根据id获取dom元素
没有找到则返会Null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var box=document.getElementById("box");
console.log(box);//<div id="box"></div> var boxs=document.getElementById("boxs");
console.log(boxs);//null
</script>
</body>
</html>
在不同的范围内查找dom元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<ol>
<li>li</li>
<li>li</li>
</ol>
<script>
var ul=document.getElementById("list");
var lis1=ul.getElementsByTagName("li");
console.log(lis1.length);//5 var lis2=document.getElementsByTagName("li");
console.log(lis2.length);//7
</script>
</body>
</html>
设置元素的css样式
ele.style.属性=属性值
如果是连字符形式的，需要转换为驼峰形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<ol id="list2">
<li>li</li>
<li>li</li>
</ol>
<script>
var ul=document.getElementById("list");
ul.style.color="red"; var ol=document.getElementById("list2");
ol.style.fontWeight="bold"; </script>
</body>
</html>
设置数组元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<ol id="list2">
<li>li</li>
<li>li</li>
</ol>
<script>
var ul=document.getElementById("list");
ul.style.color="red"; var ol=document.getElementById("list2");
var lis=ol.getElementsByTagName("li");
lis[0].style.backgroundColor="pink";
lis[1].style.backgroundColor="#abcdef"; </script>
</body>
</html>
innerHTML 获取和设置元素的内容，包括html标签和文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol id="list2">
<li>咪咪</li>
<li>灰灰</li>
</ol>
<script>
var ol=document.getElementById("list2");
var lis=ol.getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){
lis[i].innerHTML+='~~~';
console.log(lis[i].innerHTML);
} </script>
</body>
</html>
className 设置和获取元素的类
设置的类会把原来的类替换掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{color:orange;}
</style>
</head>
<body>
<ol id="list2">
<li>咪咪</li>
<li>灰灰</li>
</ol>
<script>
var ol=document.getElementById("list2");
var lis=ol.getElementsByTagName("li");
lis[0].className="orange";
console.log(lis[0].className); </script>
</body>
</html>
getAttribute() 获取属性
自定义属性建议都以 data- 开头
ele.属性名 直接获取属性（标签自带属性，除了class为className)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{color:orange;}
</style>
</head>
<body>
<p id="p" class="pp" data-type="title"></p>
<input id="text" type="text" name="text" value="hh" validate="true">
<script>
var p=document.getElementById("p");
console.log(p.id);//p
console.log(p.className);//pp
console.log(p.getAttribute("data-type"));//title var text=document.getElementById("text");
console.log(text.type);//text
console.log(text.name);//text
console.log(text.value);//hh
console.log(text.getAttribute("validate"));//true </script>
</body>
</html>
setAttribute() removeAttribute() 给dom元素设置和删除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{color:orange;}
</style>
</head>
<body>
<p id="p" class="pp" data-type="title"></p>
<script>
var p=document.getElementById("p");
p.setAttribute("data-color","orange");
console.log(p.getAttribute("data-color"));//orange p.removeAttribute("data-color");
console.log(p.getAttribute("data-color"));//null </script>
</body>
</html>
javascript中DOM获取和设置元素的内容、样式及效果的更多相关文章
- js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- javascript中如何获取对象名
javascript中如何获取对象名 一.总结 一句话总结:将对象传入参数,看参数是否为函数(js中的对象和函数是一个意思么(函数肯定是对象)),对象参数.name属性即可获得 //版本4 funct ...
- JQuery_DOM 简介/设置元素及内容
一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...
- JavaScript：JavaScript中常见获取对象元素的方法
介绍: javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取 操作如下: 1.getElementById DOM提供了一个名为getElementByI ...
随机推荐
- 暑假第一周总结（在centos虚拟机上安装jdk以及hadoop并对hadoop进行配置）
本周主要就是对虚拟机进行安装并在上边安装jdk以及hadoop并对其进行配置. 在看林子雨老师的教程时,下载了老师所给的全套的下载软件,在安装时发现老师所给的VirtualBox安装后无法正常启动,尝 ...
- Python中heapq与优先队列【详细】
本文始发于个人公众号:TechFlow, 原创不易,求个关注 今天的文章来介绍Python当中一个蛮有用的库--heapq. heapq的全写是heap queue,是堆队列的意思.这里的堆和队列都是 ...
- 物流跟踪API-快递单推送
上一篇文章我们讲解了订阅服务功能.我们已经完成了如何把物流订单订阅到快递鸟,快递鸟也能接收到我们的订单信息,接下来就需要快递鸟实时的将最新的物流轨迹推送到我们服务器,我们既然要接收快递鸟的信息,就需要 ...
- java数据域初始化
1.在声明中赋值 /** * Created by N3verL4nd on 2016/11/19. */ class Test{ private String str = "Hello W ...
- pyspark 记录
import os import sys spark_name = os.environ.get('SPARK_HOME',None) if not spark_name: raise ValueEr ...
- Codeforces Round #600 (Div. 2) E. Antenna Coverage
Codeforces Round #600 (Div. 2) E. Antenna Coverage(dp) 题目链接 题意: m个Antenna,每个Antenna的位置是\(x_i\),分数是\( ...
- BZOJ 1025 [SCOI2009]游戏 (DP+分解质因子)
题意: 若$a_1+a_2+\cdots+a_h=n$(任意h<=n),求$lcm(a_i)$的种类数 思路: 设$lcm(a_i)=x$, 由唯一分解定理,$x=p_1^{m_1}+p_2^{ ...
- 给Hangfire的webjob增加callback和动态判断返回结果功能设计
背景介绍 通常业务中需要用到定时执行功能,我用hangfire搭建了一个调度服务,这个调度服务是独立于业务逻辑的,具体可以参考文章:https://github.com/yuzd/Hangfire.H ...
- qt creator源码全方面分析(2-10-4)
目录 Plugin Life Cycle Plugin Life Cycle 为了能够编写Qt Creator插件,您必须了解启动或关闭Qt Creator时,插件管理器所采取的步骤. 本节详细描述插 ...
- JAVA System.exit(0) 和 System.exit(1) 的区别
System.exit(int state) 方法都是来结束当前运行的java虚拟机.所有System.exit(1).System.exit(0) 执行后都会退出程序. state为0时时正常退出, ...