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 ...
随机推荐
- 06 python学习笔记-常用模块（六）
一. 模块.包 1.什么是模块? Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句,是用来组织代码的.模块能定义函数 ...
- 【朝花夕拾】跨进程通信，你只知道AIDL，就OUT了
一.前言 提起跨进程通信,大多数人首先会想到AIDL.我们知道,用AIDL来实现跨进程通信,需要在客户端和服务端都添加上aidl文件,并在服务端的Service中实现aidl对应的接口.如果还需要服务 ...
- CentOS 7 的root口令破解两种方法
破解CentOS7的root口令 方法一: 第一步: 启动时任意键暂停启动 按-e-键进入编辑模式 第二步: 1.将光标移动至蓝框处linux16开头的行,添加内核参数 rd.break 2.按ctr ...
- 查找一个卷对应的osd
1.首先找到卷的id: 2.使用rados命令找到卷上面的对象数据: 3.通过ceph osd map命令可以查询到对象对应的pgid及pg对应的osd:
- RobotFramework自动化测试框架-Selenium Web自动化(二)关于在RobotFramework中如何使用Selenium很全的总结（上）
好久没有继续分享关于自动化测试相关的东西了,自动化在现今的测试领域已经越来越重要了,大部分公司在测试岗位招聘中都需要会相关的自动化测试知识.而 RobotFramework自动化测试框架 是自动化测试 ...
- 雷神领域（并查集真是个好东西）并查集+流氓dp
考场上,整整看了半个小时以上的题目!!! 化简题意: 给定一个全0矩阵,一些坐标点(x,y)为1,当三个点可以构成一个直角三角形时(直角边长为整数)拓展为一个矩形,之后从(0,0)出发,求最多的占用行 ...
- 一个帮助理清思路的神奇工具--debug
今天在回顾复习之前的知识的时候,对嵌套循环犯了迷糊,于是我使用了debug这个方法,不仅让我弄清楚嵌套循环输出结果是如何得来,也让我明白了具体流程. 在这里,IDE我使用的是PyCharm,自然用它自 ...
- php [poolwww] seemsbusy (youmayneedto increasepm.start_servers, or pm.min/max_spare_servers)错误解决方法
php [poolwww] seemsbusy (youmayneedto increasepm.start_servers, or pm.min/max_spare_servers)错误解决方法修改 ...
- node.js 需要注意知识点
复习node.js 需要注意知识点--(重点) 2.1:参数传递获取造型 客户端脚手架(发) (参数传递) node.js(收) -发ajax this.axios.get(" ...
- Dart编程语言从基础到进阶1
Dart编程语言从基础到进阶Dart的语言的发展史以及Dart能做什么未来发展怎么样等等问题我们在这里是不讨论的.我相信既然选择了来学习它,那你内心基本已经认可了它,所以我们废话不多说直接进入主题. ...