A我今天學(xué)了什么
1.DOM基礎(chǔ)
1.1什么是DOM
“W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、樣式和結(jié)構(gòu)。”
HTML Dom是關(guān)于如何增,刪,改,查 HTML 元素的標(biāo)準(zhǔn)。
DOM:document object model
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹
image.png
1.2節(jié)點
節(jié)點樹就是由一個個節(jié)點組成
父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。
image.png
1.3如何獲取節(jié)點
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
1.4
修改元素節(jié)點的內(nèi)容
innerHTML
修改樣式
object.style.color=”pink”
1.5節(jié)點的分類nodeType
a.nodeType==1 為元素節(jié)點
b.nodeType==2 為屬性節(jié)點
c.nodeType==3 位文本節(jié)點
1.6增加獲取節(jié)點
A.appendChild(node)
將新元素作為父元素的最后一個子元素進(jìn)行添加。
createElement() ; //創(chuàng)建元素節(jié)點
createTextNode(); //創(chuàng)建文本節(jié)點
var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class"); //創(chuàng)建屬性節(jié)點
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p);
B.parentNode.insertBefore(newNode,targetElementNode)
1.7刪除節(jié)點
語法
parentNode.removeChild(childNode)
1.8修改節(jié)點(替換節(jié)點)
語法
parentNode.replaceChild(newNode,oldNode);
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
2事件(event)
JavaScript與HTML之間的交互式通過事件實現(xiàn)的
onclick
onfocus
onblur
onmouseover //鼠標(biāo)移到某元素之上
onmouseout //鼠標(biāo)從某元素移開
//有事件一定有對應(yīng)一個處理結(jié)果，用函數(shù)表示
3控制語句
1.條件判斷
var age = 20;
if (age >= 18) { // 如果age >= 18為true，則執(zhí)行if語句塊
alert('成年人');
} else { // 否則執(zhí)行else語句塊
alert('未成年人');
}
多行條件判斷
var age = 3;
if (age >= 18) {
alert('成年人');
} else if (age >= 6) {
alert('少年');
} else {
alert('小孩');
}
switch結(jié)構(gòu)
多個if...else連在一起使用的時候，可以轉(zhuǎn)為使用更方便的switch結(jié)構(gòu)。
var x = 1;
switch (x) {
case 1:
console.log('x 等于1');
break;
case 2:
console.log('x 等于2');
break;
default:
console.log('x 等于其他值');
}
循環(huán)：
循環(huán)語句
while(){}
eg:
var a=0;
while(a<=10){
//只要a<=10為true就一直循環(huán)
console.log(a);
a++;
}
for循環(huán)
eg:
for(var i=0;i<=10;i++){
console.log(i)
}
for...in...
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
alert(key); // 'name', 'age', 'city'
}
B我掌握了什么
1.1什么是DOM
“W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、樣式和結(jié)構(gòu)?！?
HTML Dom是關(guān)于如何增,刪,改,查 HTML 元素的標(biāo)準(zhǔn)。
DOM:document object model
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹
image.png
1.2節(jié)點
節(jié)點樹就是由一個個節(jié)點組成
父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。
image.png
1.3如何獲取節(jié)點
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
2事件(event)
JavaScript與HTML之間的交互式通過事件實現(xiàn)的
onclick
onfocus
onblur
onmouseover //鼠標(biāo)移到某元素之上
onmouseout //鼠標(biāo)從某元素移開
//有事件一定有對應(yīng)一個處理結(jié)果，用函數(shù)表示
3控制語句
1.條件判斷
var age = 20;
if (age >= 18) { // 如果age >= 18為true，則執(zhí)行if語句塊
alert('成年人');
} else { // 否則執(zhí)行else語句塊
alert('未成年人');
}
多行條件判斷
var age = 3;
if (age >= 18) {
alert('成年人');
} else if (age >= 6) {
alert('少年');
} else {
alert('小孩');
}
switch結(jié)構(gòu)
多個if...else連在一起使用的時候，可以轉(zhuǎn)為使用更方便的switch結(jié)構(gòu)。
var x = 1;
switch (x) {
case 1:
console.log('x 等于1');
break;
case 2:
console.log('x 等于2');
break;
default:
console.log('x 等于其他值');
}
C我沒掌握什么
1.3如何獲取節(jié)點
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
1.4
修改元素節(jié)點的內(nèi)容
innerHTML
修改樣式
object.style.color=”pink”
1.5節(jié)點的分類nodeType
a.nodeType==1 為元素節(jié)點
b.nodeType==2 為屬性節(jié)點
c.nodeType==3 位文本節(jié)點
1.6增加獲取節(jié)點
A.appendChild(node)
將新元素作為父元素的最后一個子元素進(jìn)行添加。
createElement() ; //創(chuàng)建元素節(jié)點
createTextNode(); //創(chuàng)建文本節(jié)點
var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class"); //創(chuàng)建屬性節(jié)點
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p);
B.parentNode.insertBefore(newNode,targetElementNode)
1.7刪除節(jié)點
語法
parentNode.removeChild(childNode)
1.8修改節(jié)點(替換節(jié)點)
語法
parentNode.replaceChild(newNode,oldNode);
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
循環(huán)：
循環(huán)語句
while(){}
eg:
var a=0;
while(a<=10){
//只要a<=10為true就一直循環(huán)
console.log(a);
a++;
}
for循環(huán)
eg:
for(var i=0;i<=10;i++){
console.log(i)
}
for...in...
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
alert(key); // 'name', 'age', 'city'
}
