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 ...
随机推荐
- innobackupex 恢复脚本
此脚本需要与我前几天写的备份脚本配套才能使用 这里也对innobackupex吐槽下,当使用innobackupex进行恢复的时候,必须要清除所有原数据文件,但是一旦恢复失败,则连实例都将丢失,不成功 ...
- 第一篇：CDH配置本地http服务
在我们安装cdh的时候,避免不了要安装一大堆软件,包括cm的服务器,hadoop的各种组件.这些组件的文件都比较大,所以我们会在本地配置一个http服务,以便于在安装cdh服务的时候能快速的安装完.本 ...
- myeclipse 项目引入 com.sun.image.codec.jpeg 的api报错解决方法
今天在做压缩图片的功能的时候发现JDK自带的jar找不到的问题,网上找到一个方法,实测可行,这边记录下: 在Eclipse中处理图片,需要引入两个包: import com.sun.image.c ...
- Day of Week
题目1043:Day of Week 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1544 解决:609 题目描述: We now use the Gregorian style of ...
- NJUPT_Wrj 个人训练实录
9暑假了,开个训练实录,记录自己每天的训练以及补题(仅含个人训练,组队训练另开坑)希望能坚持下去QAQ 7.5日常:BZOJ1607线性筛.1601MST.1602LCA.1606背包.1625背包比 ...
- Windows搭建IIS服务器使用NATAPP实现内网穿透
目的:外网可以访问本地网页. 步骤: 一.实现内网访问 1.Win+Q搜索[控制面板],选择[程序],点击[启用或关闭Windows功能], 2.勾选[Internet Information Ser ...
- 对c语言中static函数的理解
先看看前两篇博客:个人对头文件的理解.对声明和定义的理解. static 函数只在定义该static函数的cpp中可见,在其他cpp中是不可见的. 举个例子,我建立了一个project,该projec ...
- 详解c++中对二维数组下标[][]的重载
首先定义一个矩阵类,我用一个二维数组存储矩阵中的数据,矩阵详细定义如下 class Matrix { public: Matrix(int rows, int cols) { _rows = rows ...
- helm 错误the server has asked for the client to provide credentials
一.造成错误的原因 不小心把helm的RBAC权限文件删除了.虽然重新apply了RBAC配置,但是已经无法使用helm install了. 二.解决方法 把运行的tiller的pod干掉,让他自动重 ...
- django后台处理前端上传和显示图片
1:项目根目录存放图片的目录 2:settings.py 添加 MEDIA_ROOT = os.path.join(BASE_DIR, "media") 3:url.py 添 ...