JavaScript学习笔记（三）：操作DOM对象

DOM:文档对象模型

核心
浏览器网页就是一个DOM树形结构

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM

获得DOM节点

<div id="father">
	<h1>标题一</h1>
	<p id="p1">p1</p>
	<p class="p2">p2</p>
</div>

<script>
	//对应CSS选择器
	var h1 = document.getElementsByYagName('h1');
	var p1 = document.getElementsById('p1');
	var h1 = document.getElementsByClassName('p2');
	var h1 = document.getElementsById('father');

	var children = father.children;//获取父节点下的所有子节点
	//father.firstChild
	//father.lastChild
</script>

这是原生代码，之后我们尽量都是用jQuery

更新节点

<div id="id1"></div>
<script>
	var id1 = document.getElementById('id1');
</script>

操作文本

• id1.innerText = '456' 修改文本的值
• id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作CSS

• id1.style.color=‘yellow’;

• id1.style.fontsize=‘20px’;

• id1.style.padding=‘2em’

  属性使用字符串形式
  -转驼峰命名

删除节点
删除节点的步骤：先获得父节点，再通过父节点删除此节点

<div id="father">
	<h1>标题一</h1>
	<p id="p1">p1</p>
	<p class="p2">p2</p>
</div>

<script>
	var self = document.getElementById("p1");
	var father = self.parentElement;
	
	father.removeChild(p1);
	//删除是一个动态的过程
	father.removeChild(father.children[0]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是如果这个DOM节点已经存在元素了，这样做会覆盖掉原来的。

追加

<p id="js">JavaScript</p>
<div id="list">
	<p id="se">JavaSE</p>
	<p id="ee">JavaEE</p>
	<p id="me">JavaME</p>
</div>

<script>
	var js = document.getElementById('js');
	var list = document.getElementById('list');
	list.appendChild(js);//追加到后面
	
</script>

创建一个新的标签，实现插入

<p id="js">JavaScript</p>
<div id="list">
	<p id="se">JavaSE</p>
	<p id="ee">JavaEE</p>
	<p id="me">JavaME</p>
</div>

<script>

	var js = document.getElementById('js');
	var list = document.getElementById('list');
	
	//通过JS 创建一个新的节点
	var newP = document.creatElement('p');
	newP.id = 'newP';
	list.appendChild(newP);
	newP.innerText = 'Hello, Kuangshen';
	//创建一个标签节点（通过这个属性，可以设置任意的值）
	var myScript = document.creatElement('script');
	myScript.setAttribute('type', 'text/javascript');
	//可以创建一个Style标签
	var myStyle = document.createElement('style');//创建了一个空style标签
	myStyle.setAttribute('type','text/css');
	myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置标签的内容
	document.getElementsByTagName('head')[0].appendChild(myStyle)
	
</script>

insert

<p id="js">JavaScript</p>
<div id="list">
	<p id="se">JavaSE</p>
	<p id="ee">JavaEE</p>
	<p id="me">JavaME</p>
</div>

<script>
	var ee = document.getElementById('ee');
	var js = document.getElementById('js');
	var list = document.getElementById('list');
	//要包含的节点.insertBefore(newNode,targetNode)
	list.insertBefore(js,ee);
</script>