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 ...
随机推荐
- Kubernetes学习（一）
一 安装 三台机器搭建K8S集群,一台master两台woker Docker 18.09.0---kubeadm-1.14.0-0 kubelet-1.14.0-0 kubectl-1.14.0-0 ...
- artTemplate--模板使用自定义函数(1)
案例 因为公司业务需要频繁调用接口,后端返回的都是json树对象,需要有些特殊的方法做大量判断和数据处理,显然目前简单语法已经不能满足业务需要了,需要自己定制一些 方法来处理业务逻辑. 例如后台返回的 ...
- Gloang Swagger
功能 自动化生产接口文档 安装 # 安装swaggo get -u github.com/swaggo/swag/cmd/swag # 安装 gin-swagger go get -u github. ...
- 使用.NET Core优雅获取并展示最新疫情数据
前言 新型冠状病毒的出现,着实让人紧张.我每天一大早都会去查看今天的最新数据,可是每次的数据都挺让人揪心的.今天突然间很想看看过去的历史的数据,结果查了很多资料都不是很全.反正国家让我们待在家里做贡献 ...
- 实验1: Cisco路由器基础配置
实验 1: Cisco路由器基础配置 1. 路由器的运行模式:Router> 用户模式,通常用来查看统计信息,但不能修改路由器的设置.Router# 特许模式,可以查看并修改 ...
- 编写一个函数，输入n为偶数时，调用方法求1/2+1/4+...+1/n,当输入n为奇数时，调用函数1/1+1/3+...+1/n
需求:编写一个函数,输入n为偶数时,调用方法求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n package com.Summer_0511.cn; impo ...
- 一接口自动化中生成测试数据需要用到的java类API--import java.util.Properties;
转载地址: http://www.cnblogs.com/lay2017/p/8596871.html#undefined 写的很详细
- 动手学习Pytorch(7)--LeNet
Convolutional Neural Networks 使用全连接层的局限性: 图像在同一列邻近的像素在这个向量中可能相距较远.它们构成的模式可能难以被模型识别. 对于大尺寸的输入图像,使用全连接 ...
- [MP3]MP3固件持续分享(2019.1.25)
转载自我的博客:https://blog.ljyngup.com/archives/179.html/ 所有的固件到我的博客就可以下载哦 最后更新于2019.2.1 前言 这篇文章会持续更新不同型号的 ...
- java sql语句 like%?%报错的问题
在数据库中不会报错,但用java调用时确保错. SQL语句: SELECT pageId,`name`,text FROM Page WHERE `name` LIKE CONCAT('%',?,'% ...