JS基础(6)
一,DOM
1.1 概念
文档对象模型,定义了访问和操作文档的模型
DOM操作:对元素进行获取、创建、删除的操作
1.2 元素对象的获取
document.getElementById(id值)
document.getElementsByTagName(标签名)
document.getElementsByName(name值)
document.getElementsByClassName(class值)
1.3 元素的创建、添加
createElement():创建元素节点
appendChild():向标签内末尾添加新的子元素
createTextNode():创建文本节点
1.4 元素的删除
removeChild()
1.5 标签体的设置和获取
innerHTML
innerText
1.innerText和innerHTML都可以为双标签的标签体进行内容的设置,
而innerText只能设置文本内容,innerHTML可以设置html结构
value只能对本身就具有value属性的标签设置内容
2.innerText和innerHTML都可以获取标签体的内容,
而innerText只能获取文本内容,innerHTML可以获取内部结构,
value只能获取本身就具有value属性的标签的value值
二,全选和反选的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload = function(){
cb = document.getElementById("cb");
cs = document.getElementsByClassName("c");
cb.onclick = function(){
for(var i = 0;i<cs.length;i++){
cs[i].checked = cb.checked;
}
}
}
function reverse(){
var flag = true;
for(var i = 0; i < cs.length ;i++){
cs[i].checked = !cs[i].checked;
if(!cs[i].checked){
flag = false;
}
}
if(flag){
cb.checked = true;
}else{
cb.checked = false;
}
}
/*
* 小弟控制大哥
* 只要有一个小弟没勾,就要取消大哥的勾选状态
* 只要有一个小弟勾了,就要判断其他小弟是否也都勾了,
* 只要存在有一个其他小弟没勾,大哥就不应该被勾选
* 所有小弟都勾了,就要让大哥也勾
*/
function check(state){
// 取消大哥的勾选状态
if(!state){
cb.checked = false;
}else{
for(var i = 0; i < cs.length ;i++){
if(!cs[i].checked){
cb.checked = false;
return;
}
}
cb.checked = true;
}
}
</script>
</head>
<body>
<input type="checkbox" id="cb"/>
<button onclick="reverse()">反选</button>
<br />
<input type="checkbox" class="c" onclick="check(this.checked)"/>
<input type="checkbox" class="c" onclick="check(this.checked)"/>
<input type="checkbox" class="c" onclick="check(this.checked)"/>
</body>
</html>
三,元素的创建,添加案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload = function(){
books = new Array(4);
books[0] = new Array("送浆","大郎","金莲","时迁");
books[1] = new Array("小乔","周瑜","张飞","庞统");
books[2] = new Array("薛宝钗","贾母","王熙凤","刘姥姥");
books[3] = new Array("二郎神","菩提老祖","哪吒","白龙马");
}
function select(index){
var persons = books[index];
var per = document.getElementById("per");
per.innerHTML = "<option>----请-选-择-人-物----</option>";
for(var i = 0;i <= persons.length - 1;i++){
var person = persons[i];
// 创建option元素
var option = document.createElement("option");
// 创建文本节点,并将每一个人名(小数组中的元素)放入该文本节点中
var textNode = document.createTextNode(person);
// 将文本节点放入option中
option.appendChild(textNode);
per.appendChild(option);
}
}
</script>
</head>
<body>
<select onchange="select(this.value)">
<option>----请-选-择-书-籍----</option>
<option value="0">水浒</option>
<option value="1">三国</option>
<option value="2">红楼梦</option>
<option value="3">西游记</option>
</select>
<select id="per">
<option>----请-选-择-人-物----</option>
</select>
</body>
</html>
四,动态的添加,删除元素案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 添加:
* 1.点击添加按钮获取输入框中的内容
* 2.创建td将内容设置到td中,创建按钮也放到td中
* 3.创建tr将td放到tr中
* 4.将tr放到table中
* 删除:
* 1.明确点击的是哪一个删除按钮
* this
* 2.删除动作需要通过父元素删除子元素
* 因此要获取所点击按钮所在是tr
* 获取点击按钮的table
* 通过table删除指定的tr
*/
//复杂代码
/*function add(){
var num = document.getElementById("num").value;
var name = document.getElementById("name").value;
var price = document.getElementById("price").value;
var num_td = document.createElement("td");
var num_node = document.createTextNode(num);
num_td.appendChild(num_node);
var name_td = document.createElement("td");
var name_node = document.createTextNode(name);
name_td.appendChild(name_node);
var price_td = document.createElement("td");
var price_node = document.createTextNode(price);
price_td.appendChild(price_node);
var button_td = document.createElement("td");
var del_btn = document.createElement("button");
del_btn.setAttribute("onclick","delTr(this)");
var btn_node = document.createTextNode("删除");
del_btn.appendChild(btn_node);
button_td.appendChild(del_btn);
var tr = document.createElement("tr");
tr.appendChild(num_td);
tr.appendChild(name_td);
tr.appendChild(price_td);
tr.appendChild(button_td);
var tab = document.getElementById("tab");
tab.appendChild(tr);
}*/
//简单代码
function add(){
var num = document.getElementById("num").value;
var name = document.getElementById("name").value;
var price = document.getElementById("price").value;
var tab = document.getElementById("tab");
tab.innerHTML += "<tr>\n"+
" <td>"+ num +"</td>\n"+
" <td>"+ name +"</td>\n"+
" <td>"+ price +"</td>\n"+
" <td><button onclick='delTr(this)'>删除</button></td>\n"+
"</tr>";
}
function delTr(obj){
var tr = obj.parentNode.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}
</script>
</head>
<body>
<div>
<input type="text" id="num"/>
<input type="text" id="name"/>
<input type="text" id="price"/>
<input type="button" value="添加" onclick="add()"/>
</div>
<table border="1" style="margin-top: 50px;" cellspacing="0" id="tab">
<tr>
<td width="100px">编号</td>
<td width="100px">商品名</td>
<td width="100px">价格</td>
<td width="100px">操作</td>
</tr>
<tr>
<td>A</td>
<td>apple</td>
<td>10</td>
<td>
<button onclick="delTr(this)">删除</button>
</td>
</tr>
<tr>
<td>B</td>
<td>orange</td>
<td>12</td>
<td>
<button onclick="delTr(this)">删除</button>
</td>
</tr>
</table>
</body>
</html>
五,购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
td{
width: 120px;
height: 40px;
text-align: center;
font-weight: bold;
}
</style>
<script type="text/javascript">
function add(){
var pname = document.getElementById("pname").value;
var price = document.getElementById("price").value;
if(pname == "" || price == ""){
alert("请输入内容");
return;
}
var tab = document.getElementById("tab");
tab.innerHTML += "<tr><td>"+ pname +"</td><td>"+ price +"</td><td><input type='text' maxlength='3' style='width:23px;text-align:center' value='1' onblur='getSum(this)' /></td><td >"+ price +"</td><td><button onclick='delTr(this)'>删除</button></td></tr>";
}
function delTr(obj){
var tr = obj.parentNode.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}
function getSum(obj){
var tr = obj.parentNode.parentNode;
var price = tr.childNodes[1].innerHTML;
var count = obj.value;
var sum = price * count;
tr.childNodes[3].innerHTML = sum;
}
</script>
</head>
<body>
<div>
<input type="text" id="pname" placeholder="商品名"/>
<br />
<input type="text" id="price" placeholder="单价"/>
<br />
<input type="button" value="添加到购物车" onclick="add()"/>
</div>
<table border="1" cellspacing="0" id="tab">
<tr>
<td>商品名</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</table>
</body>
</html>