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 ...
随机推荐
- 使用nutz框架，找不到入口函数，访问Url报404
案例 今天在跟着nutz框架教程去配置demo时,发现访问URL找不到入口函数,出现了Search mapping for path=/user/count : NOT Action match 异常 ...
- 三、Django学习之单表查询接口
查询接口 all() 查询所有结果,结果是queryset类型 filter(**kwargs) and条件关系:参数用逗号分割表示and关系 models.Student.objects.filte ...
- 编写一个函数，输入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 ...
- HDU_2446_打表
http://acm.hdu.edu.cn/showproblem.php?pid=2446 打表,二分查找,注意查找最后的判断. #include<cstdio> #define N 2 ...
- HDU 1005 Number Sequence(矩阵快速幂，快速幂模板)
Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...
- 关于JAVA中源码级注解的编写及使用
一.注解简介: 1.1.什么是"注解": 在我们编写代码时,一定看到过这样的代码: class Student { private String name; @Override ...
- 03(a)多元有约束优化问题(准备知识)
转成Latex上传太麻烦,直接截图上传了,需要电子版的可以关注一下,微信公众号:“实干小海豹”,回复:”优化01a“,”优化01b“,”优化02a“,”优化02b“,”优化02c“,”优化02c“.. ...
- [Effective Java 读书笔记] 第二章 创建和销毁对象 第六-七条
第六条 消除过期引用 JAVA中依然会有 memory leak的,比如一个栈先增长再收缩,那么从栈中弹出的对象是不会被当做垃圾回收的,即时使用栈的程序不再引用这些对象.这是因为栈的内部维护着对这些对 ...
- 地址ip丢失
好好的机器 ip地址没有了,好几台机器出现这个情况,目前判断是 NetworkManager 的问题: 先了解一下network和NetworkManager之间的区别,还有他们分别代表了什么. ...
- mongoDB常用命令与安全加固
一.介绍 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...