JS的DOM操作语法
整理了一下JS的DOM操作语法，这里记录一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的DOM操作</title>
<style type="text/css">
.dvClass{
width: 300px;
height: 400px;
background-color: red;
} .divHide{
width: 500px;
height: 300px;
background-color: red;
margin: 0 auto;
} .divBorder{
width: 200px;
height: 150px;
float: left;
border: 1px solid #000; /*#000是黑色*/
margin-left: 20px;
text-align: center;
line-height: 165px;
font-size: 19px;
} #querySel{ }
</style>
</head>
<body>
<input type="button" value="确定" id="btn">
<input type="button" value="确定">
<input type="button" value="确定"> <div id="dv">你好</div>
<div id="dv3"><p>新年好</p></div>
<div>大家好</div> <img src="" id="picture"> <img src="desk.jpg" id="picture2"> <a href="desk.jpg" id="aid"><img src="deskSmall.jpg" id="srcid"></a> <div class="divHide" id="dv2"></div>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" id="hide">
<input type="button" value="隐藏" name="" id="showAndHide"> <input type="text" name="" id="tx">
<input type="button" name="" value="只读" id="btn1"> <a href="www.baidu.com" id="a1">百度</a> <ul id="ul1">
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>
<hr>
<ul>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>
<input type="button" name="" value="点击变色" id="btn2"> <ul id="ul2">
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul> <div class="divBorder">111</div>
<div class="divBorder">222</div>
<div class="divBorder">333</div> <input type="text" name="" value="请输入内容" id="getFocus"> <div id="querySel">12345</div>
<input type="button" name="" value="选择器获取元素" id="btn3"> <div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<input type="button" name="" value="setAttribute" id="setAtt"> <div id="dv4">
<p id="p1">11</p>
<span>22</span>
<ul>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</div>
<input type="button" name="" value="创建" id="create"> <div id="uu"></div>
<input type="button" name="" value="创建" id="create2"> <div id="delDiv">
<p>11</p>
<span>22</span>
<p>33</p>
<span>中国</span>
</div>
<input type="button" name="" value="删除" id="del"> <script type="text/javascript">
/*获取元素对象的方法*/
document.getElementById("id的值");
document.getElementsByTagName("标签名"); //返回的是数组
document.getElementsByTagName("name的值"); //返回的是数组
document.getelementsByClassName("class的值"); //返回的是数组
document.getElementById("btn3").onclick=function(){
var obj=document.querySelector("#querySel"); //根据选择器名（id选择器、类选择器）获取元素，并给元素内属性赋值
obj.style.width="300px";
obj.style.height="200px";
obj.style.backgroundColor="red";
} /*鼠标点击事件*/
//点击按钮，弹出对话框
var btnClick=document.getElementById("btn"); //通过document.getElementById()方法返回一个document对象，getElementById("btn")的作用是找到值为btn的id
btnClick.onclick=function(){ //定义一个点击事件
alert("hello world!"); //弹出框
} //点击按钮，通过标签id，改变div标签里面的内容
document.getElementById("btn").onclick=function(){
document.getElementById("dv").innerText="你好，世界";
//document.getElementById("dv3").innerText="新年好啊"; //因为dv3的内容是写在p标签里的，所以不能用innerText，否则p标签会消失
document.getElementById("dv3").innerHTML="新年好啊啊啊";
} //点击按钮，通过标签id，改变div标签的样式
document.getElementById("btn").onclick=function(){
//第1种方法
var obj=document.getElementById("dv");
obj.style.width="300px";
obj.style.height="300px";
obj.style.backgroundColor="#000"; //#000是黑色
obj.style.marginTop="20px"; //设置div上边距为20px //第2种方法（通过将标签的class属性，改成style里面的类选择器名）
obj.className="dvClass"; //这里可以同时赋多个className，用空格分隔，比如obj.className="dvClass dvClass2";
} //点击按钮，通过标签id，在img标签里，显示图片
document.getElementById("btn").onclick=function(){
document.getElementById("picture").src="desk.jpg";
} //点击图片，通过this关键字，改变img标签里，图片的宽和高
document.getElementById("picture2").onclick=function(){
this.width="300"; //图片的长宽比较特殊，所以不加px
this.height="300";
} //点击按钮，通过标签名字，获取到所有标签
document.getElementById("btn").onclick=function(){
var arr=document.getElementsByTagName("div"); //因为标签可能重复，所以通过标签名字获取到的是数组形式
for(var i=0;i<arr.length;i++){
arr[i].innerText="全部改变";
}
} //点击按钮，通过标签id，和this关键字，改变按钮的内容
document.getElementById("btn").onclick=function(){
this.value="点击";
} //排他功能（即点击按钮后，按钮内容改变，再点击其他按钮，已经改变的按钮内容恢复）
var arr=document.getElementsByTagName("input"); //通过标签名字获取到的是数组
for(var i=0;i<arr.length;i++){
arr[i].onclick=function(){
for(var j=0;j<arr.length;j++){
arr[j].value="确定";
}
this.value="点击";
}
} //点击超链接，使图片不在新页面打开，而在当前页面打开
document.getElementById("srcid").onclick=function(){
this.src=document.getElementById("aid").href;
return false; //必须要有这个
} //点击两个按钮，显示和隐藏div
document.getElementById("hide").onclick=function(){
document.getElementById("dv2").style.display="none";
}
document.getElementById("show").onclick=function(){
document.getElementById("dv2").style.display="block";
} //点击一个按钮，显示和隐藏div
document.getElementById("showAndHide").onclick=function(){
if(this.value=="隐藏"){
document.getElementById("dv2").style.display="none";
this.value="显示";
}else if(this.value=="显示"){
document.getElementById("dv2").style.display="block";
this.value="隐藏";
}
} //点击“只读”按钮，让文本框不可编辑
document.getElementById("btn1").onclick=function(){
document.getElementById("tx").disabled=true;
} //点击超链接，禁止跳转到链接的界面
document.getElementById("a1").onclick=function(){
return false; //这句是禁止跳转的功能
} //列表各行变色
document.getElementById("btn2").onclick=function(){
var arr=document.getElementById("ul1").getElementsByTagName("li"); //只要第一个列表中的行变色
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="red";
}
}
} /*鼠标悬停和离开事件*/
//鼠标移到行上，行的颜色改变
var arr=document.getElementById("ul2").getElementsByTagName("li");
for(var i=0;i<arr.length;i++){
arr[i].onmouseover=function(){ //鼠标悬停事件
this.style.backgroundColor="red";
} arr[i].onmouseout=function(){
this.style.backgroundColor="#FFF"; //鼠标离开事件，#FFF是白色
}
} //div边框高亮显示
var arr=document.getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
arr[i].onmouseover=function(){
this.style.border="1px solid red";
}
arr[i].onmouseout=function(){
this.style.border="1px solid #000";
}
} /*获取焦点和失去焦点事件*/
//获取到焦点，使文本框内容消失
document.getElementById("getFocus").onfocus=function(){
if(this.value=="请输入内容"){ //防止已经输入内容，再次修改时，内容被清空
this.value="";
}
} // //失去焦点，使文本框内容恢复
document.getElementById("getFocus").onblur=function(){
if(this.value==""){ //避免输入内容后，失去焦点，输入的内容被清空
this.value="请输入内容";
}
} /*标签属性*/
document.getElementById("setAtt").onclick=function(){
//设置属性
document.getElementsByTagName("div")[0].setAttribute("class","divBorder"); //[0]代表返回数组中的第一个元素，setAttribute里面分别是属性名和属性值
//获取属性
var obj=document.getElementsByTagName("div")[0].getAttribute("class"); //getAttribute里面填属性名就返回属性值，填属性值就返回属性名，没有就返回null
alert(obj);
//删除属性
document.getElementsByTagName("div")[0].removeAttribute("class");
} /*节点
类型：nodeType，值1为标签节点，2为属性节点，3为文本节点
名字：nodeName，大写的标签名——标签类型，小写的属性名——属性类型，#text——文本类型
节点的值：nodeValue，null——标签类型，属性值——属性类型，文本内容——文本类型*/
//获取标签的父节点
var obj=document.getElementById("p1").parentNode; //获取父节点
console.log(obj); //输出<div id="dv4">，说明P1所在标签的父元素为<div>
console.log("节点的类型："+obj.nodeType+"，节点的名字："+obj.nodeName+"，节点的值："+obj.nodeValue); //获取父级元素
console.log(document.getelement("dv4").parentElement); //获取子节点
var obj1=document.getElementById("dv4").childNodes; //返回的是数组
console.log(obj1); //输出：NodeList(7) [ #text, p#p1, #text, span, #text, ul, #text ]，所以一共有7个节点 //获取第一个子节点
console.log(document.getelement("dv4").firstChild); //获取最后一个子节点
console.log(document.getelement("dv4").lastChild); //获取子元素
var obj2=document.getElementById("dv4").children;
console.log(obj2); //HTMLCollection { 0: p#p1, 1: span, 2: ul, length: 3, … }，所以一共有3个子元素 //获取第一个子元素
console.log(document.getElementById("dv4").firstElementChild); //获取最后一个子元素
console.log(document.getElementById("dv4").lastElementChild); /*创建标签*/
//方法1
document.getElementById("create").onclick=function(){
document.write("<p>增加的标签</p>"); //这种方式会将html里面其他标签都清空，只留这个增加的
} //方法2
document.getElementById("create").onclick=function(){
document.getElementById("dv4").innerHTML="<p>哈哈哈哈</p>"; //这种方式会将dv4所在标签内的，子标签都清空，只留增加的
} //方法3
document.getElementById("create").onclick=function(){
var obj=document.createElement("p"); //先创建一个p标签
document.getElementById("dv4").appendChild(obj); //然后添加，这种方式不清空之前的标签，只增加
} //创建图片标签
document.getElementById("create").onclick=function(){
document.getElementById("dv4").innerHTML="<img src=desk.jpg/>";
} //根据数组创建列表标签
document.getElementById("create2").onclick=function(){
var arr=["新闻标题1","新闻标题2","新闻标题3","新闻标题4","新闻标题5","新闻标题6"];
var str="<ul>";
for(var i=0;i<arr.length;i++){
str+="<li>"+arr[i]+"</li>";
}
str+="</ul>";
document.getElementById("uu").innerHTML=str;
} /*删除元素*/
document.getElementById("del").onclick=function(){
document.getElementById("delDiv").removeChild(document.getElementById("delDiv").firstElementChild); //删除第一个元素
document.getElementById("delDiv").removeChild(document.getElementById("delDiv").lastElementChild); //删除第一个元素
}
</script>
</body>
</html>
。
JS的DOM操作语法的更多相关文章
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- JS的BOM操作语法
整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 总结js常用的dom操作（js的dom操作API）
转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 5月16日上课笔记-js中DOM操作
一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...
- js函数 DOM操作
回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...
随机推荐
- C语言文件输入/输出 ACM改进版(用freopen函数方便检验)
这次用到的文件打开函数不再是fopen,而是stdio.h中包含的另一个函数freopen FILE * freopen ( const char * filename,const char * mo ...
- Mysql数据库（九）备份与恢复
一.数据备份 1.使用mysqldmp命令备份 (1)备份一个数据库 mysqldump -u root -p dbname table1 table2 ... > D:\BackName.sq ...
- 数据库（一）--通过django创建数据库表并填充数据
django是不能创建数据库的,只能够创建数据库表,因此,我们在连接数据库的时候要先建立一个数据库. 在models.py中 from django.db import models class Pu ...
- httprunner-2-linux下搭建hrun（下）
前言 前面我们说了linux下安装python3,hrun是需要依赖数据库,我们用docker进行安装mysql5.7让数据库能正常连接.安装mysql5.7请参考:https://www.cnblo ...
- SpringBoot 逻辑异常统一处理
构建项目 我们将逻辑异常核心处理部分提取出来作为单独的jar供其他模块引用,创建项目在parent项目pom.xml添加公共使用的依赖,配置内容如下所示: <dependencies> & ...
- 如何学好javascript
今天逛论坛时看到有朋友问,是否有专门教Javascript的学校,这里想想把自己的一点建议和自己3年来的前端Javascript开发的经验跟大家分享下,也给出几本个人认为不错的书来做为大家学习的参考资 ...
- 最全的access2013教程 access 2010教程 access 2007教程 Access 2003教程
最全的access2013教程 access 2010教程 access 2007教程 Access 2003教程 都在这个access中国网站里 http://www.office-cn.net/o ...
- 20190906_matplotlib_学习与快速实现
20190906 Matplotlib 学习总结 第一部分: 参考连接: Introduction to Matplotlib and basic line https://www.jianshu.c ...
- 超出隐藏兼容H5
常用的字体超出隐藏不能兼容H5和ios 所以整理了两种用jquery来实现的方法,然后弊端是只能隐藏指定字数不能段落隐藏 方法一. //超出隐藏兼容iosfunction hide(text,nube ...
- JAVA Rest High Level Client如何取聚合后得数据
对于刚刚学习es的童鞋来说,很容易不清楚怎么获取客户端对es文档的聚合结果,下面就演示一下模仿DSL写聚合,然后获取到聚合对结果. 一, 对于下面这个简单的聚合,目的是对于文档全文匹配,聚合颜色字段. ...