JavaScript 第七天 DOM操作
1.1 什么是DOM 操作
文档Document对象Object模型Model
通过js中的内置对象document对网页的内容进行增删改查。
增：类似与 发表说说
1.2 增
A 传统方式
<input id="bar" /><button οnclick="haha()">发表</button>
<p id="foo">
您还没有说说。
</p>
<script type="text/javascript">
function haha(){
//1. 动态创建
var a= document.createElement("h1");
//2. 优化
a.innerHTML = bar.value;
//3. 动态添加
foo.appendChild(a);
}
</script>
B 模板方式
将我们要动态生成的内容提前写好 ， 当我们需要发布的时候 ， 我们直接将 模板动态放到页面中
<style type="text/css">
#aaa {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<input id="bar" /><button οnclick="haha()">发表</button>
<p id="foo"> </p>
<script type="text/template" id="temp">
<div id="aaa">
<img src="img/pie_0.jpg" width="50" alt="">
<span>张三</span>
<span>发布于:XXXX</span>
<h6>
YYYY
</h6>
<button>点赞</button>
<button>转发</button>
<button>评论</button>
<button>举报</button>
</div>
</script>
<script type="text/javascript">
function haha(){
foo.innerHTML += temp.innerHTML.replace( "XXXX" , new Date() ).replace( "YYYY" , bar.value );
}
</script>
</body>
1.3 删
<div id="ad" style="width: 200px;height: 200px; padding: 10px; border: 2px solid red;">
我是小广告
<button οnclick="hehe()">关闭</button>
</div>
<script type="text/javascript">
function hehe(){
ad.remove();
}
</script>
1.4 查
通过document对象获取页面内容
1 为什么要查询?
function hehe(){
ad.remove();
}
在js代码中 我们要对页面的标签进行操作，首先要获取页面标签 这就是查询操作
2 具体操作
<body>
<div id="foo">
<div class="haha">123</div>
<div id="bar" class="haha">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="haha">456</div>
</div>
<script type="text/javascript">
// 1 根据id获取页面标签 但是我们通过id获取页面标签 一般是直接使用（id不能是关键字）
var a1 = document.getElementById("bar");
// 2 通过class类名获取页面标签 HTMLCollection { 0: div.haha, 1: div#bar.haha, 2: div.haha, length: 3, … }
// 将获取的内容存储到一个集合中 并且返回 如果需要继续操作则可以根据索引编号获取
var a2 = document.getElementsByClassName("haha");
// 3 通过标签名获取页面元素 HTMLCollection { 0: span, 1: span, 2: span, length: 3 }
var a3 = document.getElementsByTagName("span");
console.log( a3 );
// 4 通过选择器获取页面符合条件的第一个元素
var a4 = document.querySelector(".haha");
// 5 通过选择器获取页面符合条件的所有元素
var a5 = document.querySelectorAll("div");
var b1 = bar.firstElementChild;
var b2 = bar.lastElementChild;
var b3 = bar.children;
var b4 = bar.nextElementSibling;
var b5 = bar.previousElementSibling;
var b6 = bar.parentElement;
var b7 = bar.parentElement.parentElement;
console.log(b7)
</script>
1.5 选项卡练习
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.s {
background-color: red;
color: green;
}
</style>
</head>
<body>
<button class="s" >淘宝</button>
<button>店铺</button>
<button>宝贝</button>
<script type="text/javascript">
var arr = document.querySelectorAll( "button" );
for( var i=0;i<arr.length;i++){
var btn = arr[i];
btn.onclick = function(){
document.querySelector(".s").className = "";
/* this 指代当前事件的触发对象 哪个按钮让这个函数执行了 this就指谁*/
this.className = "s";
}
}
</script>
</body>
1.6 购物车练习
<body>
<div>
商品名称: <input id="n1">
商品价格: <input id="n2">
<button id="tjsp">添加商品</button>
<button οnclick="fan()">反选</button>
<button οnclick="shan()">删除</button>
</div>
<table id="bg" class="table table-border ">
<tr>
<th> <input type="checkbox" id="qx" οnchange="haha()"> </th>
<th> 商品名称 </th>
<th> 商品价格 </th>
<th> 下单日期 </th>
</tr>
</table>
<script type="text/template" id="temp">
<tr>
<td><input type="checkbox" class="foo"></td>
<td>XXXX</td>
<td>YYYY</td>
<td>ZZZZ</td>
</tr>
</script>
<script type="text/javascript">
function shan(){
if( confirm("确定删除码？") ){
var arr = document.querySelectorAll(".foo");
for(var i=0;i<arr.length;i++){
if(arr[i].checked == true) arr[i].parentElement.parentElement.remove();
}
}
}
function fan(){
var arr = document.querySelectorAll(".foo");
for(var i=0;i<arr.length;i++){
arr[i].checked = !arr[i].checked;
}
}
function haha(){
var arr = document.querySelectorAll(".foo");
for(var i=0;i<arr.length;i++){
arr[i].checked = qx.checked;
}
}
tjsp.onclick = function(){
bg.firstElementChild.innerHTML += temp.innerHTML.replace("XXXX", n1.value).replace("YYYY",n2.value).replace("ZZZZ", new Date());
}
</script>
</body>
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
