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 ...
随机推荐
- 虚拟机 ubuntu系统忘记密码如何进入
重启 虚拟机 按住shift键 会出现下面的界面 按住‘e’进入下面的界面往下翻 更改红框勾到的字符串为: rw init=/bin/bash 然后按F10进行引导 然后输入 :”passwd” ...
- 机器学习-NLP之Word embedding 原理及应用
概述 自然语言是非常复杂多变的,计算机也不认识咱们的语言,那么咱们如何让咱们的计算机学习咱们的语言呢?首先肯定得对咱们的所有文字进行编码吧,那咱们很多小伙伴肯定立马就想出了这还不简单嘛,咱们的计算机不 ...
- Kubelet 中的 “PLEG is not healthy” 到底是个什么鬼？
原文链接:深入理解 Kubelet 中的 PLEG is not healthy 在 Kubernetes 社区中,PLEG is not healthy 成名已久,只要出现这个报错,就有很大概率造成 ...
- SDL初始化和创建窗口
//初始化SDL2和创建一个窗口,并且将屏幕绘制成大红色 #include <iostream> extern "C" { #include <SDL.h> ...
- qt5连接sqlite数据库实例
建库 在VS下新建qt console appication 代码: #include <iostream> #include <Qtsql/QSqlDatabase> #in ...
- 视觉光盘，只有我可以贴全世界唯一，Windows上最高级的DOCKER客户端数字, 夜晚点击一个都没有，值班的小编辛苦了
继上一篇视觉光盘,只有我可以贴全世界唯一,你永远截不到的图片(小编请用人性化语言解释移出首页) 合体了 晚上的小编, 呆了吗? 我看到了少于150字的随笔不允许发布到网站首页 我决定了用我专业的龟式输 ...
- Go语言实现：【剑指offer】斐波那契数列
该题目来源于牛客网<剑指offer>专题. 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0) n<=39 Go语言实现: 递归: ...
- 【Java并发工具类】StampedLock：比读写锁更快的锁
前言 ReadWriteLock适用于读多写少的场景,允许多个线程同时读取共享变量.但在读多写少的场景中,还有更快的技术方案.在Java 1.8中, 提供了StampedLock锁,它的性能就比读写锁 ...
- VFP 的 SPT 起跳 -- 陈纯(BOE数据网络工作室)
细节描述 Visual FoxPro 的 SPT 技术快速入门 说在前面熟悉 Fox 的朋友都知道,在 VFP 里我们可以使用远程视图 (Remote View) 和 SPT(SQL Pass Thr ...
- 永久关闭linux swap
一般来说,Linux的虚拟内存会根据系统负载自动调整.内存页(page)swap到磁盘会显著的影响Kafka的性能,并且Kafka重度使用page cache,如果VM系统swap到磁盘,那说明没有足 ...