DOM基础
HTML Dom是关于如何增，删，改，查HTML元素的标准。
节点：
节点树就是由一个个节点组成
获取节点
innerHTML可以改变元素的内容
<div id="test">
<!--hello world-->
</div>
<script>
var test = document.getElementById("test");
通过id名获取
test.innerHTML="hello world";
console.log(test);
</script>
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<script>
/*通过class去获取*/
var lis = document.getElementsByClassName("item");
/*通过标签名去获取*/
var tags = document.getElementsByTagName("li");
/*通过选择器获取*/
var qs = document.querySelectorAll(".item");
/*
* 改变样式的语法
* object.style.color=value;
* */
qs[0].style.backgroundColor="pink";
</script>
节点类型
* nodeType==1元素节点
* nodeType==2属性节点
* nodeType==3文本节点
添加节点
<div id="parent">
<p id="one">hello world</p>
<p id="two">hello world</p>
</div>
<script>
/*
在父元素的目标元素之前插入一个元素
parentNode.insertBefore(newElement,targetElement)
* */
var h = document.createElement("h1");
var txt = document.createTextNode("我是老大");
h.appendChild(txt);
/*获取parent*/
var parent = document.getElementById("parent");
var one = document.getElementById("one");
var two = document.getElementById("two");
parent.insertBefore(h,one);
var p = document.createElement("p");
var txt2 = document.createTextNode("我是老三");
p.appendChild(txt2);
parent.insertBefore(p,two);
</script>
删除节点
<div id="parent">
<p id="child">hello world</p>
</div>
<script>
/*
* parentNode.removeChild(childNode)
* */
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child)
</script>
修改节点
<div id="parent">
<p id="child">hello world</p>
<!--<h1>修改</h1>-->
</div>
<script>
/*
parentNode.replaceChild(newElment,targetElement)
* */
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var h = document.createElement("h1");
var txt = document.createTextNode("修改");
h.appendChild(txt);
parent.replaceChild(h,child)
</script>
input输入框背景色改变
<input type="text" id="input"/>
<script>
var input = document.getElementById("input");
input.onfocus=function(){
this.style.background="red";
};
input.onblur=function(){
this.style.background="pink"
}
</script>
鼠标点击、进入、退出，背景色的改变
//css
<style>
div{
width:100px;
height:100px;
background-color: red;
}
</style>
//HTML
<div id="test">
</div>
<script>
var test = document.getElementById("test");
test.onmouseover=function(){
this.style.background="pink"
};
test.onmouseout=function(){
this.style.background="green"
}
</script>
条件判断
1.鼠标点击时如果背景是红，变为粉红，如果背景是粉红，变为红
//css
<style>
div{
width:100px;
height:100px;
}
</style>
//HTML
<div id="test" style="background: red">
</div>
<script>
var test = document.getElementById("test");
test.onclick=function(){
var color = this.style.background;
if(color=="red"){
this.style.background="pink"
}else{
this.style.background="red"
}
}
</script>
* 背景色用内联样式，不然会出点小问题
2.a>=18时为成年人，其他则为未成年人
<script>
var a=3;
if(a>=18){
alert("成年人")
}else{
alert("未成年")
}
</script>
3.当sex为男时，弹出"可以逛xxx网站"，当sex为女时，弹出"不欢迎逛xxx网站,可以找许峰"，当sex为其他时，弹出"自己想办法"
<script>
var sex="男";
if(sex=="男"){
alert("可以逛xxx网站")
}else if(sex=="女"){
alert("不欢迎逛xxx网站,可以找许峰")
}else{
alert("自己想办法")
}
</script>
4.当sex为女时，弹出"可以生娃"，当sex为男时，弹出"喜欢看片"，当sex为其它时，弹出"自己玩"
<script>
var sex="女";
switch (sex){
case "男":
alert("喜欢看片");
break;
case "女":
alert("可以生娃");
break;
default :
alert("自己玩")
}
</script>
循环
1.当a<5时，依次弹出小于的值
<script>
var a=1;
while(a<5){
alert(a);
a++;
}
</script>
2.当i<5时，在控制台可以看到小于的值
<script>
for(var i=0;i<5;i++){
console.log(i);
}
</script>
3.li中，所有奇数行为红色，所有偶数行为粉红色
<ul>
<li class="item">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script>
var lis = document.getElementsByClassName("item");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.background="pink"
}else{
lis[i].style.background="red"
}
}
</script>
4.可以在控制台看到arr中的数字和yu中的内容依次排列
<script>
var arr = [1,2,3,4,5,6];
for(var key in arr){
console.log(arr[key])
}
var yu = {
name:"yuchangshuai",
age:24,
sex:"男"
};
for(var k in yu){
console.log(yu[k])
}
</script>
