昨日重点：
dom
我们操作最多的就是 元素节点 标签节点 标签 li span
节点的访问关系
父级 parentNode
this.parentNode == 我的父亲
兄弟 nextSibling
** 孩子们**
childNodes 官方用法
一般情况下，我们只需要元素节点
** nodeType 来 判断 **
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
children 不是官方写法
所有的孩子 亲儿子
ie 678 把注释节点 也算 可以避免
今日案例：设置节点属性
案例1：京东轮播图按钮
JS 生成轮播的圆点
<!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"); // 创建 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. 获取节点属性
getAttribute(属性) 获取属性
通过这个方法，可以得到 某些元素的 某些属性 。
alert(demo.getAttribute("title"));
弹出对话框： 弹出title里面的内容
弹出对话框
2. 设置节点属性
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：微博输入框
微博发送框.gif
<!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"); // 创建ul
btn.parentNode.appendChild(ul); // 追加到 他的父亲里面
btn.onclick = function(){
if(txt.value == "")
{
alert("输入不能为空");
return false; // 终止函数执行
}
var newli = document.createElement("li");
newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; // 把表单的值给 新li
txt.value = ""; // 清空 表单
var lis = ul.children; // 获得有多少个li
// if else 这个片段 让我们新发布的内容 最上显示
if(lis.length == 0) // 第一次创建
{
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">
微博发布: <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button>
</div>
</body>
</html>
内置对象
内置对象： 内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。
网友评论
女神