A我今天学了什么
1.DOM基础
1.1什么是DOM
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
DOM:document object model
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树
image.png
1.2节点
节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
image.png
1.3如何获取节点
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
1.4
修改元素节点的内容
innerHTML
修改样式
object.style.color=”pink”
1.5节点的分类nodeType
a.nodeType==1 为元素节点
b.nodeType==2 为属性节点
c.nodeType==3 位文本节点
1.6增加获取节点
A.appendChild(node)
将新元素作为父元素的最后一个子元素进行添加。
createElement() ; //创建元素节点
createTextNode(); //创建文本节点
var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class"); //创建属性节点
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p);
B.parentNode.insertBefore(newNode,targetElementNode)
1.7删除节点
语法
parentNode.removeChild(childNode)
1.8修改节点(替换节点)
语法
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之间的交互式通过事件实现的
onclick
onfocus
onblur
onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开
//有事件一定有对应一个处理结果，用函数表示
3控制语句
1.条件判断
var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
alert('成年人');
} else { // 否则执行else语句块
alert('未成年人');
}
多行条件判断
var age = 3;
if (age >= 18) {
alert('成年人');
} else if (age >= 6) {
alert('少年');
} else {
alert('小孩');
}
switch结构
多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。
var x = 1;
switch (x) {
case 1:
console.log('x 等于1');
break;
case 2:
console.log('x 等于2');
break;
default:
console.log('x 等于其他值');
}
循环：
循环语句
while(){}
eg:
var a=0;
while(a<=10){
//只要a<=10为true就一直循环
console.log(a);
a++;
}
for循环
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） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
DOM:document object model
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树
image.png
1.2节点
节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
image.png
1.3如何获取节点
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
2事件(event)
JavaScript与HTML之间的交互式通过事件实现的
onclick
onfocus
onblur
onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开
//有事件一定有对应一个处理结果，用函数表示
3控制语句
1.条件判断
var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
alert('成年人');
} else { // 否则执行else语句块
alert('未成年人');
}
多行条件判断
var age = 3;
if (age >= 18) {
alert('成年人');
} else if (age >= 6) {
alert('少年');
} else {
alert('小孩');
}
switch结构
多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。
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如何获取节点
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
1.4
修改元素节点的内容
innerHTML
修改样式
object.style.color=”pink”
1.5节点的分类nodeType
a.nodeType==1 为元素节点
b.nodeType==2 为属性节点
c.nodeType==3 位文本节点
1.6增加获取节点
A.appendChild(node)
将新元素作为父元素的最后一个子元素进行添加。
createElement() ; //创建元素节点
createTextNode(); //创建文本节点
var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class"); //创建属性节点
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p);
B.parentNode.insertBefore(newNode,targetElementNode)
1.7删除节点
语法
parentNode.removeChild(childNode)
1.8修改节点(替换节点)
语法
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>
循环：
循环语句
while(){}
eg:
var a=0;
while(a<=10){
//只要a<=10为true就一直循环
console.log(a);
a++;
}
for循环
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'
}
