HTML DOM 允许 JavaScript 改变 HTML 元素的内容
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容: document.write(Date());
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性, 如需改变 HTML 元素的内容
语法 : document.getElementById(id).innerHTML = new HTML ;
document.getElementById("p1").innerHTML="New text!";
<div id="test">
<p id="t_one">中山学院</p>
<p id="t_two">软件工程</p>
</div>
<script type="text/javascript">
// 创建一个新的p标签元素
var p = document.createElement("p");
// 创建文本的节点
var node = document.createTextNode("中山学院");
// 在p元素后边追加文本节点
p.appendChild(node);
// 获取test这个元素的对象
var test = document.getElementById("test");
// 向test元素追加新元素
test.appendChild(p);
// 删除已经存在的html元素
var t = document.getElementById("test");
var pp = document.getElementById("t_two");
t.removeChild(pp);
</script>
</body>
<body>
<div id="txt" onmouseover="changeBackground();" onmouseout="bak();"></div>
<script type="text/javascript">
function changeBackground(){
document.getElementById("txt").style.background = "red";
}
function bak(){
document.getElementById("txt").style.background = "#690";
}
</script>
</body>
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应
一. 对事件做出反应
我们可以在事件发生时执行 JavaScript，当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码 。
<1> 点击元素时： <p onclick="this.innerHTML='Ming太帅了 ! '">Javascript HTML DOM</p>
<2> 从事件处理器调用一个函数:
<script> function changetext(id) { id.innerHTML="Ming"; } </script>
<p onclick="changetext(this)">点这里</p>
<3> HTML 事件属性 : <button onclick="displayDate()">点击这里</button>
<4> 使用 HTML DOM 来分配事件
向 button 元素分配 onclick 事件： document.getElementById("myBtn").onclick=function(){displayDate()};
<style type="text/css">
*{margin:0;padding:0;}
#txt{300px;height:100px;background:#690;margin:120px auto;cursor: pointer;}
</style>
<body>
<div id="txt" onmousedown="an()" onmouseup = "fang()"></div>
<script type="text/javascript">
// 首先当点击鼠标按钮时，会触发 onmousedown 事件
function an(){
document.getElementById("txt").style.background = "yellow";
}
function fang(){
document.getElementById("txt").style.background = "#690";
}
</script>
</body>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
例： <body onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时，会调用函数
例 : 实战
onmouseover 和 onmouseout 事件： 可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<script type="text/javascript">
function message(){
alert("欢迎您 光临小店 ，我是店小二为您服务 !");
}
function bb(){
alert("欢迎下次再来！!");
}
</script>
</head>
<body onunload="bb();">
</body>
click事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件
最后，当完成鼠标点击时，会触发 onclick 事件
onload
onfocus
鼠标事件
<style type="text/css">
*{margin:0;padding:0;}
#txt{300px;height:100px;background:#690;margin:120px auto;cursor: pointer;}
</style>
</head>
<body>
<div id="txt" onmousedown="an()" onmouseup = "fang()"></div>
<script type="text/javascript">
// 首先当点击鼠标按钮时，会触发 onmousedown 事件
function an(){
document.getElementById("txt").style.background = "yellow";
}
function fang(){
document.getElementById("txt").style.background = "#690";
}
</script>
</body>
//////////////////////////////////////////////////////
<body>
请输入文字：<input type="text" onfocus="myFocus();" id="text"/> <br /><br />
请输入文字(另一种写法)：<input type="text" onfocus="myFocus01(this);"/>
<script type="text/javascript">
function myFocus(){
document.getElementById("text").style.background = "red";
}
//
function myFocus01(t){
t.style.background = "red";
}
</script>
</body>
click事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件
最后，当完成鼠标点击时，会触发 onclick 事件
onload
onfocus
鼠标事件
<style type="text/css">
*{margin:0;padding:0;}
#txt{300px;height:100px;background:#690;margin:120px auto;cursor: pointer;}
</style>
</head>
<body>
<div id="txt" onmousedown="an()" onmouseup = "fang()"></div>
<script type="text/javascript">
// 首先当点击鼠标按钮时，会触发 onmousedown 事件
function an(){
document.getElementById("txt").style.background = "yellow";
}
function fang(){
document.getElementById("txt").style.background = "#690";
}
</script>
</body>
//////////////////////////////////////////////////////
<body>
请输入文字：<input type="text" onfocus="myFocus();" id="text"/> <br /><br />
请输入文字(另一种写法)：<input type="text" onfocus="myFocus01(this);"/>
<script type="text/javascript">
function myFocus(){
document.getElementById("text").style.background = "red";
}
//
function myFocus01(t){
t.style.background = "red";
}
</script>
</body>
<select onchange="myChange(this)">
<option value="0">--请选择月--</option>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
</select>
<script type="text/javascript">
function myChange(val){
alert(val.value);
}
</script>
</body>
document常用方法
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(name) //获得指定name值的对象
document.body.appendChild(oTag)
//////////////////获取ID
<body>
<input type="text" id="username" value="124"/>
<div id="tm_div"><span>如何获取div的值呢?innerHTML/innerText<b>我是一个加粗的</b><span></div>
<span id="tm_span">如何获取span的值呢?</span>
<p id="tm_p">如何获取span的值呢?</p>
<a href="javascript:void(0);" id="tm_link">点击我?</a>
<script type="text/javascript">
//操作网页上的标签元素就使用document.
//什么是document 文档对象模式(Document Object Model)---DOM
//写方法和定义的时候严格区分大小写
//id选择器:唯一标识符
//方法：document.getElementById(元素的id)根据id获取对象
//.value只有form元素才有意义
var value = document.getElementById("username").value;
//获取div.span等其他元素(p,label,em,span,div,h1-h6 a table td tr)
//获取值得方式是:innerText(纯文本)/innerHTML(带有格式的文本)
var divText = document.getElementById("username").innerText;
alert("innerText的值："+divText);
var divHTML = document.getElementById("username").innerHTML;
alert("innerHTML"+divHTML);
var divText = document.getElementById("username").outerText;
alert("outerText的值："+divText);
var divHTML = document.getElementById("username").outerHTML;
alert("outerHTML的值:"+divHTML);
</script>
</body>
1：<body>
<input type="checkbox" name="hobbys" value="爬山">爬山
<input type="checkbox" name="hobbys" value="音乐">音乐
<input type="checkbox" name="hobbys" value="读书">读书
<input type="checkbox" name="hobbys" value="游泳">游泳
<script type="text/javascript">
//document.getElementsByName:只是用含有name元素的标签.如果input
var divObj = document.getElementsByName("hobbys");
divObj[2].value = "睡觉";
//value/innerText/innerHTML/outerText/outerHTML
</script>
</body>
/////////////////////////////////////////////////////////////////////////////
2：:
<body>
<div class="tm_div">123</div>
<div class="tm_div">234</div>
<div class="tm_div2">234</div>
<script type="text/javascript">
//document.getElementsByName()
//document.get（获取） Elements(元素) By(通过) TagName(标签)(tagName)通过
//document.getElementsByTagName(tagName)通过标签名获取当前标签对象，返回数组
var objArr = document.getElementsByTagName("div");
//alert(objArr.length);//输出3
tm_getClass("tm_div","444444444444444");
function tm_getClass(className,html){
var arr = [];
for(var i=0;i<objArr.length;i++){
if(objArr[i].getAttribute("class")==className){
arr.push(objArr[i]);
}
}
for(var i=0;i<arr.length;i++){
arr[i].innerHTML = html;
}
}
</script>
</body>
////////////////////////////////////////////////////////
3：
<body>
<input type="text" id="username" username="ming"/>
<div id="tm_div"></div>
<script type="text/javascript">
/*
1:dom.getAttribute(key);//获取标签元素属性对应属性值
dom.setAttribute(key,value);//为标签元素添加属性和属性值
属性=属性值如:id="tm_div" type="text" name="username"
2:如果是元素自身由w3c提供元素属性是可以直接通过当前dom对象本身获取
如:document.getElementById("username").id
document.getElementById("username").type
document.getElementById("username").name
document.getElementById("username").style
*/
var inputDom = document.getElementById("username");
var username = inputDom.getAttribute("username");
inputDom.setAttribute("age",20);
alert(inputDom.getAttribute("age"));//输出20
</script>
</body>