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'
}