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 ...
随机推荐
- python wraps的作用
1.__name__用来显示函数的名称,__doc__用来显示文档字符串也就是("""文档字符串""")这里面的内容 2.首先我们来看不加@ ...
- 面向对象的7个设计原则->开车理解->贴近生活
设计模式在我们的开发中是不可或缺的一部分,很多人会说,我没用那些设计模式啊,我也开发的挺好的,其实不然,我们在开发中都用到了这些设计模式,只不过我们并没有在意这些,今天我就用开车的方法来解释一下我们的 ...
- javadoc的使用
在进行项目开发过程中,项目接口文档是很重要的一块内容,在java项目中我们可以用swagger,asciidoc,javadoc等方式来生产文档,而其中最基本的文档生成方式就是javadoc,它一般用 ...
- 我的【Java】面试日记
背景 在老东家五年了,总共工作整七年,经历两家公司.2019-10-31日离职.公司规模较小,项目压力不大,非985/211毕业,统招本科,计算机专业.目标:中大型公司,最好是大厂,嘿嘿,不过不抱希望 ...
- 《Effective Java》 读书笔记（七）消除过期的对象引用
大概看了一遍这个小节,其实这种感觉体验最多的应该是C/C++程序,有多杀少个new就得有多个delete. 一直以为Java就不会存在这个问题,看来是我太年轻. 感觉<Effective Jav ...
- P2114 [NOI2014]起床困难综合症
#include<iostream> #include<cstdio> using namespace std; ; ]; long long n,m; long long t ...
- Python基础学习（一）之Python的概述与环境安装
Python介绍 Python语言介绍 Python是一门高级的.面向对象的.解释性.脚本语言. 高级语言:贴近开发者,对应底层语言,底层语言贴近机器:java.C#.php .ruby 面向对象对应 ...
- 2.4g和5g无线使用频率
- centos中网卡的配置
配置临时IP: ip a a 192.168.59.100/24 dev ens32 ifconfig ens32 192.168.59.100 up 在Linux最小安装之后,一般需要手动配置网络地 ...
- 本周授课内容：http,https,Tomcat,servlet
https:https是基于安全套接字的http协议,也可以理解为是http+ssl/tls(数字证书)的组合 http和https的区别: HTTP 的 URL 以 http:// 开头,而 HTT ...