昨日重點：
dom
我們操作最多的就是 元素節(jié)點 標簽節(jié)點 標簽 li span
節(jié)點的訪問關系
父級 parentNode
this.parentNode == 我的父親
兄弟 nextSibling
** 孩子們**
childNodes 官方用法
一般情況下，我們只需要元素節(jié)點
** nodeType 來 判斷 **
nodeType == 1 元素節(jié)點
nodeType == 2 屬性節(jié)點
nodeType == 3 文本節(jié)點
children 不是官方寫法
所有的孩子 親兒子
ie 678 把注釋節(jié)點 也算 可以避免
今日案例：設置節(jié)點屬性
案例1：京東輪播圖按鈕
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul,ol{list-style:none}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
left: 50%;
margin-left:-50px;
bottom:10px;
}
.circle span {
float: left;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 18px;
margin-right: 10px;
cursor: pointer;
}
.circle span.current {
background-color: purple;
}
</style>
<script>
window.onload = function(){
var scroll = document.getElementById("scroll");
var circle = document.createElement("div"); // 新的
//circle.className = "circle"; // 更改的類名
circle.setAttribute("class","circle"); // 更為常用
scroll.appendChild(circle);
var ul = document.getElementById("ul");
var lis = ul.children; // ul 的所有孩子
//alert(lis.length);
// 生成了新的大盒子
// 大盒子里面要放入 n個小的span
for(var i=0; i<lis.length; i++)
{
var newspan = document.createElement("span"); // 創(chuàng)建 6次 span
newspan.innerHTML = i+1;
circle.appendChild(newspan);
}
var child = circle.children;
child[0].setAttribute("class","current"); // 第一個孩子 添加 current
}
</script>
</head>
<body>
<div class="box" id="scroll">
<div class="slider">
<ul id="ul">
<li><img src="images/11.jpg" alt=""/></li>
<li><img src="images/22.jpg" alt=""/></li>
<li><img src="images/33.jpg" alt=""/></li>
<li><img src="images/44.jpg" alt=""/></li>
<li><img src="images/55.jpg" alt=""/></li>
<li><img src="images/55.jpg" alt=""/></li>
<li><img src="images/66.jpg" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
相關知識點：
1. 獲取節(jié)點屬性
getAttribute(屬性) 獲取屬性
通過這個方法假夺，可以得到 某些元素的 某些屬性 惜互。
alert(demo.getAttribute("title"));
彈出對話框： 彈出title里面的內容
2. 設置節(jié)點屬性
setAttribute(“屬性”,”值”);
比如說或辖，我們想要把 一個 類名 改為 demo
div.setAttribute(“class”,”demo”);
3. 刪除某個屬性
** removeAttribute(“屬性”); **
demo.removeAttribute(“title”)
這個盒子就沒有title 屬性 給刪掉了 笆檀。
A.appendChild(B);
B 一定是 A 孩子 同時 b 放到了a 的里面 裝到里面去了 最后面。 b 放到 a 里面
A.insertBefore（B尺铣，C）
B C 都是 A 的孩子
把 b 放到 a 里面 拴曲，但是 是 c 的前面
案例2：微博輸入框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: none;}
*{margin:0;padding: 0;}
.box {
margin: 100px auto;
width: 600px;
height: auto;
border:1px solid #333;
padding: 30px 0;
}
textarea {
width: 450px;
resize: none; /*防止用戶拖動 右下角*/
}
.box li {
width: 450px;
line-height: 30px;
border-bottom:1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
<script>
window.onload = function(){
//獲取對象 再次操作對象
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul"); // 創(chuàng)建ul
btn.parentNode.appendChild(ul); // 追加到 他的父親里面
btn.onclick = function(){
if(txt.value == "")
{
alert("輸入不能為空");
return false; // 終止函數(shù)執(zhí)行
}
var newli = document.createElement("li");
newli.innerHTML = txt.value + "<a href ='javascript:;'>刪除</a>"; // 把表單的值給 新li
txt.value = ""; // 清空 表單
var lis = ul.children; // 獲得有多少個li
// if else 這個片段 讓我們新發(fā)布的內容 最上顯示
if(lis.length == 0) // 第一次創(chuàng)建
{
ul.appendChild(newli); // ul 的后面追加
}
else
{
ul.insertBefore(newli,lis[0]); // 每次生成的新的li 放到第一個li 的前面
}
var as = document.getElementsByTagName("a"); // 獲得所 a
for(var i=0; i<as.length;i++)
{
as[i].onclick = function(){
//removeChild
ul.removeChild(this.parentNode); // UL 他的爸爸
// a 的粑粑是 li
}
}
}
}
</script>
</head>
<body>
<div class="box">
微博發(fā)布: <textarea name="" id="" cols="30" rows="10"></textarea> <button>發(fā)布</button>
</div>
</body>
</html>
內置對象
內置對象： 內置對象就是指這個語言自帶的一些對象，供開發(fā)者使用凛忿，這些對象提供了一些常用的或是最基本而必要的功能澈灼。
