DOM基礎(chǔ)
HTML Dom是關(guān)于如何增臭墨，刪，改呐赡，查HTML元素的標準。
節(jié)點：
節(jié)點樹就是由一個個節(jié)點組成
獲取節(jié)點
innerHTML可以改變元素的內(nèi)容
<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>
節(jié)點類型
* nodeType==1元素節(jié)點
* nodeType==2屬性節(jié)點
* nodeType==3文本節(jié)點
添加節(jié)點
<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>
刪除節(jié)點
<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>
修改節(jié)點
<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.鼠標點擊時如果背景是紅坯台，變?yōu)榉奂t炬丸，如果背景是粉紅，變?yōu)榧t
//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>
* 背景色用內(nèi)聯(lián)樣式蜒蕾，不然會出點小問題
2.a>=18時為成年人稠炬，其他則為未成年人
<script>
var a=3;
if(a>=18){
alert("成年人")
}else{
alert("未成年")
}
</script>
3.當sex為男時，彈出"可以逛xxx網(wǎng)站"咪啡，當sex為女時首启，彈出"不歡迎逛xxx網(wǎng)站,可以找許峰"，當sex為其他時瑟匆，彈出"自己想辦法"
<script>
var sex="男";
if(sex=="男"){
alert("可以逛xxx網(wǎng)站")
}else if(sex=="女"){
alert("不歡迎逛xxx網(wǎng)站,可以找許峰")
}else{
alert("自己想辦法")
}
</script>
4.當sex為女時闽坡，彈出"可以生娃"，當sex為男時愁溜，彈出"喜歡看片"，當sex為其它時外厂，彈出"自己玩"
<script>
var sex="女";
switch (sex){
case "男":
alert("喜歡看片");
break;
case "女":
alert("可以生娃");
break;
default :
alert("自己玩")
}
</script>
循環(huán)
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中汁蝶，所有奇數(shù)行為紅色渐扮，所有偶數(shù)行為粉紅色
<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中的數(shù)字和yu中的內(nèi)容依次排列
<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>
