函数封装，就一句话：
相同的，重复，封起来；
不同的，要改的，传进去
DOM（文档对象模型）
我们的JS分为三个部分组成
ECMAscript DOM BOM
核心（ECMAscript）欧洲计算机制造协会
描述了JS的语法，以及基本对象，相当于制定了JS的规则，例如
var a 和var A，是不一样的；
文档对象模型（DOM） 重点
处理网页内容的方法和接口
浏览器对象模型（BOM）
和浏览器的交互方法以及接口
例如，用浏览器获取用户地址。。。。。
1.1 DOM的定义
DOM为文档提供了结构化表示，并定义了如何通过脚本访问文档结构
目的其实就是为了能够让JS操作HTML元素而制定的规范
DOM树
image.png
1.2 节点
标签
由结构树可以看出，整个文档，他就是一个文档节点；
每个HTML标签都是一个元素节点
标签中的文字则是文字节点
标签的属性是属性节点
页面中的一切都是节点
1.3 访问节点
之前学过两种
getElementById()//用过ID访问节点
getElementsByTagName()//通过标签访问节点
getElementsByClassName()//通过类名获取节点，也是伪数组
但是，有小小的兼容性问题；
主流浏览器支持
IE 6 7 8不支持
怎么办？自己封装自己的类
1.3 封装自己的class类
原理：我们去除所有的盒子，用遍历的方法，通过每个盒子的className来判断，如果相等就留下
1.4 判断真假
我们用条件语句来判断5大数据类型的真假
数据类型 结论
数字类型： 所有数字都是真，包括负数，0是假；
字符串类型： 所有字符串都是真，” ”串为假;
对象类型： 所有对象都是真，null是假；
未定义： undefined为假，没有真（只要未定义，它就是假的，只要定义了，他就是真的，并且也就不是undefined）；
1.5 访问关系
父节点
parentNode
兄弟节点
nextSibling（下一个兄弟，一定要是写在一起的，不然就是文档流）
nextElementSibling（可以理解为兼容，也就是，只获取元素兄弟，不是元素的东西，就给他过滤掉了，例如字符串、数值，都不是元素，就给他过滤掉了）
previousSibling(上一个兄弟)
previousElementSibling
子节点获取
firstChild 第一个子节点
firstElementChild
lastChild 最后一个子节点
lastElementChild
childNodes 获取所有子节点，并且返回的是一个伪数组，他是标准属性
children 重要返回所有的子元素节点，这个更好用，常用；
节点也分三种，通常，我们只需要用到元素节点
但是，我们也要清除，哪三种节点
节点.nodeType;//获取节点类型；
nodeType==1 元素节点 也是我们常用的
nodeTpye==2 属性节点
nodeType==3 文本节点
1.6 节点的操作
新建节点 插入节点 删除节点 克隆节点等等
1.7 创建节点
var li=documemt.createElement(‘li’);//在文档上创建一个节点，节点是一个li元素标签；
var body=document.getElementsByTagName('body');
//先，给谁添加节点，就要获取谁，现在是给body添加，就要获取body
var div=document.createElement('div');
//想要添加标签，就要有才能添加，不能无中生有，所以先创建一个标签节点
body[0].appendChild(div);
//给body添加子节点，子节点是div
for(var i=1;i<=5;i++){
var div=document.createElement('div');
body[0].appendChild(div)
}
//循环创建添加多个节点
appendChild()是添加在父节点的最后面
如果我们想在前面添加节点，就要用：
insertBefore（插入的节点，参照节点） 在前面添加子节点
insertBefore（两个参数都必须要设置，如果不想设置，可以设置为null）
insertBefore(想要插入的节点，参照节点)
参照节点：你设置的谁，就在谁的前面插入，如果不设置，就添加在子元素的最后
怎么添加兄弟节点：
就是给当前元素的父亲添加子节点，就相当于给当前元素添加兄弟节点；
移出节点：removeChild()
克隆节点，就是复制节点
节点.cloneNode();
括号里面可以写参数，写true，就是深层复制，除了复制节点，还会复制子节点；
如果写false，那么只复制当前节点
如果不写参数，默认false
demo（一）发布微博
<style>
*{
margin: 0;
padding: 0;
}
body{
color:#333;font-family:Helvetica,Microsoft YaHei;
}
#box{
width: 500px;
font-size: 14px;
border: 1px solid silver;
margin: 100px auto;
}
button{
font-size: 14px;
}
#text{
margin: 20px 0 0 0;
}
#one{
margin: 0 0 0 8px;
}
#two{
width: 360px;
margin: 0 auto 30px;
}
p{
line-height: 26px;
border-bottom: 1px dashed silver;
}
a{
color: #E2526F;
text-decoration: none;
float: right;
}
</style>
<div id="box">
<div id="one">
<span>微博发布</span>
<textarea cols="50" rows="10" id="text"></textarea>
<button id="btn">发布</button>
</div>
<div id="two"></div>
</div>
<script>
function $(id){
return document.getElementById(id);
}
$("btn").onclick = function(){
if($("text").value == ""){
alert("请输入您要发表的内容");
return false;
}
var p = document.createElement("p");
p.innerHTML = $("text").value +'<a href="javascript:">删除</a>';
$("text").value = "";
var ps = $("two").children; // 获取所有的 p
$("two").insertBefore(p,ps[0]); // 把新创建的 p 放在第一个
var as = document.getElementsByTagName("a"); // 获取所有的a标签
for(var i = 0;i<as.length;i++){
as[i].onclick = function(){
$("two").removeChild(this.parentNode);
}
}
};
</script>
demo（二）节点轮播图
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
position: absolute;
}
li{
width:1235px ;
}
input{
width: 80px;
height: 40px;
}
img{
float: left;
}
.box{
width: 247px;
height: 350px;
border: 1px solid pink;
position: relative;
/*overflow: hidden;*/
margin: 0 auto;
}
#right{
margin-left: 83px;
}
.btn{
width: 248px;
margin: 5px auto;
}
</style>
<div class="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<input type="button" value="向左" id="left"/>
<input type="button" value="向右" id="right"/>
</div>
<script>
var ul = document.getElementById("ul");
var btn = document.getElementsByTagName("input");
var img = document.getElementsByTagName("img");
var lis = document.getElementsByTagName("li");
var time;
btn[0].onclick = function(){
clearInterval(time);
ul.insertBefore(lis[lis.length-1],lis[0]);
ul.style.left = "-247px";
var pos = -247;
time = setInterval(function(){
if(pos<0){
pos += 13;
ul.style.left = pos +"px";
}else{
clearInterval(time);
}
},30)
};
btn[1].onclick = function(){
clearInterval(time);
var pos = 0;
time = setInterval(function(){
if(pos>-247){
pos -= 13;
ul.style.left = pos + "px";
}else{
clearInterval(time);
ul.appendChild(lis[0]);
ul.style.left = "0px";
}
},30)
};
</script>
网友评论