通过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的实现；

本文标题:通过JavaScript操作DOM改变HTML结构

文章作者:Mingchuan Luo

发布时间:2017-06-14, 00:00:00

最后更新:2017-12-01, 19:33:36

原始链接:https://harrypotter3.github.io/2017/06/14/fffff的副本/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|