JS的dom相关操作

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应


1.js写入内容
document.write(Date());
alert(txt);

2.修改内容实例：
改变内容：
document.getElementById(id).innerHTML=new HTML


var element=document.getElementById("header");
element.innerHTML="New Header";


改变属性：
document.getElementById(id).attribute=new value


document.getElementById("image").src="landscape.jpg";



3.修改css
document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";


4.js 事件
onclick=JavaScript

HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时


对事件做出反应
<h1 onclick="changetext(this)">请点击该文本</h1>


HTML 事件属性
<button onclick="displayDate()">点击这里</button>


使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};


5.js增删元素or节点
添加：
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);  添加节点


var element=document.getElementById("div1");
element.appendChild(para); 添加节点


删除：(须直到父节点)
var child=document.getElementById("p1");
child.parentNode.removeChild(child);


或者
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>


<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>