JsDOM操作
DOM（文档对象模型）
在JS中，所有的事物都是节点，元素、文本等都是节点。把浏览器中的标签看成树状结构，每个标签看成一个节点（dom元素）。
应用场景：可以通过节点进行DOM对象的增删改查
获取DOM节点的方法
//通过id获取，唯一的
var oDiv = document.getElementById('box');
//通过类名获取
var oDiv = document.getElementsByClassName('.box')[];
//通过标签名获取
var oDiv = document.getElementsByTagName('div')[];
常用的DOM节点
节点的增删改查
<div>
<h3>路飞学城</h3>
</div>
<div id="box">
<p>alex</p> <p>wusir</p>
<p>xiaomage</p>
<p>egon</p>
<a>luffy</a>
</div>
<div>
<h3>路飞学城2</h3>
</div> // 1.创建元素节点
var oH2 = document.createElement('h2'); // 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
oH2.innerHTML = '<p>嘿 sariy</p>'; // 只设置元素内的文本内容，div标签将被当做文本元素
oH2.innerText = '<div>嘿嘿</div>' // 2.将创建好的元素节点添加到指定元素所有内容的后面
oDiv.appendChild(oH2); // 获取元素节点里的所有内容 包括标签和文本
console.log(oDiv.innerHTML); // 表示元素节点的标签名大写
console.log(oDiv.tagName); // 只获取元素内的文本内容，html标签将被忽略
console.log(oDiv.innerText); // 设置元素id
oH2.id = 'luffy'; // 设置类名
oH2.className = 'wusir';
oH2.className = 'wusir2'; //获取标签属性
console.log(oH2.getAttribute('class'));//wusir2 // 设置标签属性
oA.setAttribute('href','https://www.luffycity.com'); // 删除元素上的属性
oA.removeAttribute('href'); // 删除创建的对象
// oDiv.removeChild(oH2); //如果为true 克隆当前元素与元素的所有子节点
// console.log(oDiv.cloneNode(true)); // 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点
var op = document.createElement('p');
op.innerText = '我是一个段落';
oDiv.replaceChild(op,oA); //style属性 ：css内联样式属性值
//一般情况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 如果没有“-”号，则两者 一样。
//例如:oDiv.css.backgroundColor = 'red';
模态框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
html,body{height: %;}
#box{width: %;height: %;background: rgba(,,,.);}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: ;
right: ;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff; }
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//dom document object model //树状结构
/*
html
head body 节点
span div button img ....
*
*
* */
console.log(document)
//获取dom元素
var btn = document.getElementById('btn') //创建divdom元素
var oDiv = document.createElement('div')
var oP = document.createElement('p')
var oSpan = document.createElement('span') oDiv.id = 'box';
oP.id = 'content'
oP.innerHTML = '模态框成功弹出'
oSpan.innerHTML = 'X';
oSpan.id = 'span1' oDiv.appendChild(oP) //把oP插入到div中
oP.appendChild(oSpan) console.log(btn)
btn.onclick = function(){
//alert(111)
//动态的添加到body中一个div ；btn的父节点就是body btn.parentNode; 把oDiv插到btn的前面
console.log(this)
this.parentNode.insertBefore(oDiv,btn) }
oSpan.onclick = function(){ //点击X把div标签又移除了。
// removeChild oDiv.parentNode.removeChild(oDiv) //
} </script>
</html>
点击有惊喜案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
.box{
width: 200px;
height: 200px;
background: red;
text-align: center; /*文字*/
color: white;
line-height: 200px;
font-size: 23px;
font-weight: bold; /*变粗*/
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜！！
</div>
<!--<div class="box"></div>-->
</body>
<script type="text/javascript"> var oBox = document.getElementsByClassName('box')[];
console.log(oBox.innerText);//只获取元素内的文本内容即获取点击有惊喜，html标签将被忽略 var a = ; oBox.onclick = function(){
a++;
if(a%===){ //1除以4等于0，余数为1
this.style.background = 'green'; //使用行内样式引入css样式，见下截图
this.innerText = '继续点击哦！'; //设置oBox的内容
}else if(a%==){ //2%4的余数为2，即2除以4
this.style.background = 'blue';
this.innerText = '哈哈！骗你的';
}else if(a%==){
this.style.background = 'transparent';
this.innerText = '';
}else{
this.style.background = 'red';
this.innerText = '点击有惊喜！！';
} } </script>
</html>
节点创建、获取（追加）、设置相关属性、点击事件、移除
简易留言板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>简易留言板</h1>
<div id="box">
<!--<ul> </ul>--> </div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
var ul = document.createElement('ul');
var box = document.getElementById('box');
box.appendChild(ul);
//获取按钮元素
var btn = document.getElementById('btn');
var msg = document.getElementById('msg') var count = ; btn.onclick = function(){
console.log(msg.value);
//创建li标签，并设置内容
var li = document.createElement('li');
li.innerHTML = msg.value + "<span> X</span>" //文本元素+span标签;
var lis = document.getElementsByTagName('li');
if(lis.length == ){
ul.appendChild(li);
count++;
}else{
ul.insertBefore(li,lis[]);
count++;
} msg.value = ''; //清空，把框内的内容清空
var spans = document.getElementsByTagName('span'); //移除
for(var i = ; i< spans.length; i++){
spans[i].onclick = function(){
ul.removeChild(this.parentNode) //this 指的是spans[i]
count--;
}
}
}
function sum(){
alert('一共发布了'+count+'条留言');
}
</script>
</html>
选项卡（table栏的切换）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: ;
margin: ;
}
ul{list-style: none;}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc; /*设置下切换的时候页面背景变白*/
} ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: #FFFFFF;
}
p{
display: none; //设置隐藏了
height: 200px;
text-align: center;
line-height: 200px;
background-color: pink;
}
p.active{
display: block; /*块级元素和行内元素的转换； 只显现出class=“active”的，其他的都隐藏掉 */ } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li> </ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p> </div>
</body>
<script type="text/javascript"> var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p') for(var i = ; i < tabli.length; i++){
//为了保存我的i的变量； for循环遍历它会取到最后一个i；保存点击每个选项的i；双重for循环
tabli[i].index = i;
tabli[i].onclick = function(){ for(var j = ; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active'
console.log(this.index) // 0 1 2
tabContent[this.index].className = 'active';
}
} </script>
</html>
仿淘宝搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;} #search{
position: relative;
} input{
outline: none; /*外边的那个边框轮廓*/
display: block;
width: 490px;
height: 50px;
margin-top: 20px;
font-size: 20px;
border: 2px solid orange;
border-radius: 10px; }
label{
position: absolute;
top: 20px;
left: 10px;
font-size:8px;
color: gray; }
</style>
</head>
<body>
<div id="search">
<input type="text" id="text" />
<label for="txt" id="msg">路飞学城</label>
</div>
</body> <script type="text/javascript">
var txt = document.getElementById('text');
var msg = document.getElementById('msg'); //检测用户表单输入的时候会调用这个方法
txt.oninput = function(){ if (this.value == '') {
msg.style.display = 'block'
}else{
msg.style.display = 'none'
}
} </script>
</html>
获取当前最新时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body> <script type="text/javascript"> setInterval(function(){ //开启一个定时器时时监听它 var date = new Date(); var y = date.getFullYear();
var m = date.getMonth(); //获取一个月的时候要加上一个1，如4月，4+1
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds(); //今天是2018年2月23日 8:23:09 //document.body.innerHTML = '123' 把这个时间换成123就可以了
//document.body.innerHTML = "今天是"+y+"年"+(m+1)+"月"+d+"日"+h+"时"+min+"分"+s+"秒"
document.body.innerHTML = "今天是"+y+'年' + num(m+)+"月"+ num(d) + "日" + num(h)+":"+num(min)+":"+num(s) },) function num(n){
if (n<) {
return ""+ n; //对分钟做一个操作，01/02/03/04、、、；上边加一个这样的num函数就可以了 }
return n
} //
</script> </html>
匀速运动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
.box{
width: 200px;
height: 200px;
background-color: #FF0000; /*红色*/
position: absolute;
top: 50px;
left: 0px;
}
</style>
</head>
<body>
<div id="wrap"> <button id="btn">运动</button>
<div class="box" id="box1"> </div> </div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn'); var box1 = document.getElementById('box1') var count = ;
var time = null;
btn.onclick = function(){ //onclick事件 time = setInterval(function(){ //开启一个定时器
count+=; //每1s让这个count++；让它变得快一点就是count+=2/4/10
if(count>){ //left小于1000px
clearInterval(time) //到达一定时就给它清除掉
box1.style.display = 'none'
} box1.style.left = count + 'px' //一定要加px },) //0.01s }
</script> </html>
3-5s之后关闭广告
在img上边加一个span标签，给它个x，取到span便签，点击事件，然后把当前的img删除掉就可以了；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
img{
position: fixed;
}
ul{list-style: none;}
#left{left: ;}
#right{right: ;}
ul li{
font-size: 25px;
}
</style>
</head>
<body>
<img src="data:images/1.gif"/ id="left">
<img src="data:images/1.gif"/ id="right">
<ul>
<li>屠龙宝刀，点击就送</li>
</ul> </body> <script type="text/javascript">
window.onload = function(){ //窗口在加载的时候让它去执行一个函数
var left = document.getElementById('left');
var right = document.getElementById('right'); setTimeout(function(){
left.style.display = 'none'; //5s之后把它给关掉
right.style.display = 'none';
},)
}
</script>
</html>
小米滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
.wrap{
width: 512px;
height: 400px;
border: 3px solid #;
position: relative;
overflow: hidden; #内容会被修剪，且其余部分是不可见的
margin: 100px auto;
}
.wrap span{
width: %;
height: 200px;
position: absolute;
}
.up{
top: ;
}
.down{
bottom: ;
}
img{
position: absolute;
top: ;
left: ;
}
</style>
</head>
<body>
<div id="box" class="wrap">
<img src="data:images/mi.png"/ id="xiaomi"> <span class="up" id="picUp"></span> <span class="down" id="picDown"></span> </div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown'); var img = document.getElementById('xiaomi') var count = ;
var time = null;
//鼠标移入的时候吧
up.onmouseover = function(){ //不管你是移动到上边还是移动到下边， 上来先清定时器
clearInterval(time);
time = setInterval(function(){
count-=; count >= - ? img.style.top = count + 'px': clearInterval(time); //top默认0 },)
}
down.onmouseover = function(){
clearInterval(time) time = setInterval(function(){
count+=; count < ? img.style.top = count + 'px': clearInterval(time);
},)
} </script>
</html>
无缝轮插图
就是每张图片之间没有停顿的效果，一直在那滚动；有缝就是这张图片播放去之后再播放下一张；交点图就是下面有索引的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: ;margin: ;}
ul{list-style: none;}
.box{
width: 600px;
height: 200px;
margin: 50px auto;
overflow: hidden; /*超出部分设置这个*/
position: relative; /*父盒子相对定位*/ }
ul li{
float: left;
}
.box ul{
width: %;
position: absolute; /*子盒子绝对定位*/
top: ;
left: ; } </style>
</head>
<body>
<div class="box">
<ul>
<li><img src="data:images/01.jpg"/></li>
<li><img src="data:images/02.jpg"/></li>
<li><img src="data:images/03.jpg"/></li>
<li><img src="data:images/04.jpg"/></li> </ul>
<!--<div></div>
<p></p>--> </div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[];
var ul = box.children[]; //取到这个ul
var num = ;
var timer = null; timer = setInterval(autoPlay,)
//函数的声明
function autoPlay(){
num--; //匀速 num <=- ? num= : num ;
ul.style.left = num + 'px' }
//鼠标移动上去
box.onmouseover = function(){
clearInterval(timer)
}
box.onmouseout = function(){ //鼠标离开的时候
timer = setInterval(autoPlay,);
} </script>
</html>
JsDOM操作的更多相关文章
- JS---DOM操作有哪一些
一 DOM对象有哪一些 1 windos 1.属性 opener 2.方法 open(),close() 例:<script langguage="javascript&qu ...
- JS-DOM操作应用高级（三）
appendChild 1.先把元素从原有的父级上删除 2.添加到新的父级 <title>无标题文档</title> <script> window.on ...
- JS-DOM操作应用高级（二）
搜索 字符串比较.忽略大小写----大小写转换.模糊搜索----search的使用.split.高亮显示及筛选 toLowerCase() 方法用于把字符串转换为小写 str.search('') ...
- JS-DOM操作应用高级（一）
表格应用--tBodies tHead tFoot rows cells <title>无标题文档</title> <script> window.onlo ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- jq代替jsdom操作部分
接触js后学习了一些js操作html的方法 js可以配合css完成许多动画和操作.初次接触jquery感觉不是很习惯,毕竟js有了习惯,但是jq还是省去了很多繁琐的操作步骤. 首先使用之前 ...
- JS-DOM操作应用
父级.appendChild(子节点) 父级.insertBefore(子节点,在谁之前) <title>无标题文档</title> <script> window ...
- JSdom操作内容，样式，属性
<p> JavaScript 能够直接写入 HTML 输出流中: </p> <script> document.write("<h1>This ...
- js-DOM操作基本知识
随机推荐
- u-boot移植（六）---代码修改---串口
一.代码流程 1.1 串口代码 程序流程图如下: default_serial_console 执行的代码如下: 在JZ2440.H中有如下定义: 则执行结构体s3c24xx_serial0_devi ...
- 我的Mac中毒了，病毒居然叫做MacPerformance
禁用 ReportCrash 直接干掉进程肯定不管用,从名字就知道这个进程会自动被触发,除非修改系统配置. Google 了一下,发现很简单,在 terminal 里执行 launchctl unlo ...
- Seafile 网络磁盘
Seafile 个人 网盘 1.安装 Seafile 1.安装依赖环境 使用 yum 安装 Python 及 MySQL: yum install python python-setuptools p ...
- 【文件】使用jacob将word转换成pdf格式
使用jacob将word转换成pdf格式 1.需要安装word2007或以上版本,若安装07版本学确保该版本已安装2downbank0204MicrosoftSaveasPDF_ XPS,否则安装 ...
- 浏览器调用接口发现Provisional headers are shown
一次请求时候报错 无论如何也找不到错误,后台接口和前端请求都是正确的.后来发现是 自己浏览器上装了广告拦截的插件 把我这个请求给拦截 果断卸载插件立马就好了.
- 网易云课堂--妙味 《js基础课程》
==小例子1 ==JS中允许将"." 替换成 “[ ]” document.getElementById('btn1') 写成 document['etElementById' ...
- jquery 学习(一) - 选择器
基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...
- JavaScript对象复制（二）
<script> function copy(a) { ret = {}; for (sth in a) { temp = a[sth]; if (temp instanceof Arra ...
- ubuntu下好用的音乐播放器audacious
audacious是ubuntu下一款非常好用的音乐播放器,万能的音乐播放器而且简洁美观,可以播放ape各种无损发烧音乐格式. 如果想听音乐的话,现在百度音乐,酷我音乐,酷狗音乐等都是有网络播放器的, ...
- apache服务器的常用功能及设置
安装httpd yum -y install httpd 服务脚本:/etc/rc.d/init.d/httpd 脚本配置文件:/etc/sysconfig/httpd ...