面向对象

面向对象：不了解原理的情况下，会使用功能。
对象：不了解内部的结构，但是知道它的操作。（电视）
（Date对象）
Array对象，sort()方法。（内部的各种排序方法。）
使用对象时，只关注对象提供的功能，不关注其内部细节。

里面至少有两种人：
1.用对象
2.写对象

封装：把东西封装好，会用就可以。
继承：从已有对象上，继承出新的对象。

猜猜我是谁

我是魔法少女钏～当然你也可以叫我伊东魔法太郎嘻嘻
搭建这个网站的目的是为了记录自己在前端学习及设计方面的一点一滴。
平时喜欢画点画～P点图～听点歌～敲点代码～～
最大的梦想是让宇宙充满快乐～还有环游世界～认识更多奇妙的人哇～
最喜欢的一句话是尼采所说的：在自己身上，克服这个时代。

我自不辱使命，使我与众生相聚。很高兴遇见你嘻嘻。

通过JavaScript操作DOM改变HTML结构

（一）
要对元素进行修改或者替换删减，首先要获取元素。
这里有一个getElementById()方法，获取html中出现过的id值，前面定义一个变量以得到确切的id值。
除了id，还有多个元素可以使用相同的name属性，如复选框。使用getElementByName()函数;

获取元素：document.getElementById(“id”);
获取或替换元素：innerHTML 语法：Object.innerHTML Object是获取的元素对象
改变html样式：Object.style.property = new style;
控制类名：className object.classname = classname 可获取某元素的css样式进而修改

eg：
改变元素的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
<h2 id="con">JavaScript课程</H2>
<div id="txt"> 
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
</div>
<input type="button" value="改变颜色" onclick = "changeColor()" >  
/定义"改变颜色"的函数
var myh = document.getElementById("con");
var mydiv = document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
mydiv.style.color="red";
mydiv.style.backgroundColor="#ccc";
}

更新DOM：可以直接修改节点的文本：
1.修改innerHTML属性（强大），操作：获取id值—设置
eg：


var p = document.getElementById(‘p-id’);
p.innerHTML = ‘ABC’;
2.修改innerText或textContent属性，这样可自动对字符串进行HTML编码
eg：
var p = document.getElementById(‘p-id’);
p.innerText = ‘’;

插入DOM：如果是空节点，则是插入；如果不是空节点，则会替换原来的节点；
1.使用appendChild，把一个字节点添加到父节点的最后一个字节点。
eg.：

1
2
3
4
5
6
7
8
9
10
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：
var js = document.getElementById(‘js’);
var list = document.getElementById(‘list’);
list.appendChild(js);

2.从零创建一个新的节点，然后插入到指定位置：

1
2
3
4
5
6
var 
list = document.getElementById(‘list’);
haskell = document.createElement(‘p’);
haskell.id = ‘haskell’;
haskell.innerText = ‘Haskell’;
list.appendChild(haskell);

Dom的排序方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var li=document.getElementById("test-list");
var list=document.getElementsByClassName('lang');
for(var j=1;j<list.length;j++){
for(var i=0;i<j;i++){
if(list[i].innerHTML>list[j].innerHTML){
li.insertBefore(list[j], list[i]);
}
}
}
</script>
</head>
<body>
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
</body>
</html>

删除DOM：获得节点—获得父节点—调节父节点的removeChild把自己删掉
var self = document.getElementById(‘to-be-removed’);
var parent = self.parentElement;
var removed = parent.removeChild(self);
removed === self;

（二）
DOM节点类型：
Element（元素）
Attr（属性）
Text（文本节点）
Comment（注释节点）
Document（文档节点）
DocumentType（文档类型节点）
DocumentFragment（文档片段节点）有利于实现文档的剪切，只作为临时的占位符

每次进入html后，有一个渲染引擎的过程，这个过程用不同的方法速度也会不一样，所以为了达到最优的用户体验会需求最优的渲染方法。
过程：解析html—构建dom树—布局渲染树（dom节点）—绘制渲染树

方法：
1.
window.onload = function() //比较慢
{ document.getElementById（“header”）.style.color = “red”;}
2.
domready的实现；

|