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 ...
随机推荐
- SQL挑战一 : 查找最晚入职员工的所有信息
以上数据库表: CREATE TABLE `employees` ( `emp_no` int(11) NOT NULL, `birth_date` date NOT NULL, `first_nam ...
- CountDownLatch和CycliBarrier介绍
一.CountDownLatch 它被用来同步一个或多个任务,强制他们等待其他任务完成,这就是闭锁. public CountDownLatch(int count) { if (count < ...
- 设计模式（十二）Decorator模式
Decorator模式就是不断地为对象添加装饰的设计模式.以蛋糕为例,程序中的对象就相当于蛋糕,然后像不断地装饰蛋糕一样地不断地对其增加功能,它就变成了使用目的更加明确的对象. 首先看示例程序的类图. ...
- mysql获取刚插入(添加)记录的自动编号id
我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的.但在多线程情况下,就不行了. 下面介 ...
- <script>属性async和defer的区别
async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...
- emacs考场短配置
(set-background-color "gray15") (set-foreground-color "gray") ;;设置颜色 (global-set ...
- 【原创】（十）Linux内存管理 - zoned page frame allocator - 5
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- Mybatis：CRUD操作
提示: Mapper配置文件的命名空间为对应接口包名+接口名字,这个经常会忘记和搞错的!! select标签 在接口中编写三个查询方法 //获取全部用户List<User> selectU ...
- Ubuntu 18.04 下安装pip3及pygame模块
1.Ubuntu下pip3的安装.升级.卸载 安装pip3 sudo apt-get install python3-pip 升级pip3 sudo pip3 install --upgrade pi ...
- 使用 Github + Hexo 从 0 搭建一个博客
最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...