javascript HTML DOM

一、简介：

通过HTML DOM可以访问javascript  HTML文档的所有元素；

1、javascript可以改变页面中的所有HTML的元素、属性、样式  以及对事件作出反应；

2、查找HTML元素：

可以通过id查找：var x=document.getElementById("id1");

通过表签名查找：var y=document.getElementsByTagName("div");

 

二、DOM  HTML

1、创建动态的HTML内容：

document.write(“今天的日期是”+Date());　　　　//在页面中输出今晚的日期

　　注意：绝不要在文档加载之后时候使用document.write（），不然会覆盖文档；

2、改变HTML内容；

修改HTML内容最佳方式是使用innerHTML属性；

document.getElementById("id2").innerHTML="new content";

　　

3、改变HTML属性:

document.getElementById("id2").title="this is a story";

　　

三、DOM CSS

1、改变HTML元素的样式；element.style.prototype="nwe style"

document.getElementById（”P2“）.style.color="red";

　　

四、DOM事件

onclick事件举例：

document.getElementById('mybtn').onclick=function(){
  alert("hello world");
};

　　1、事件句柄

　　　　能够使HTML事件触发浏览器中的行为，比如当某个用户点击HTML元素启动一段代码时，可插入HTML标签以定义事件行为；

如：onblur（）　　　　onchange()　　oncick（）等事件

　　2、鼠标/键盘属性

altKey（） 事件触发时 alt键被按下时

　　3、IE属性

　　4、标准Event属性

　　5、标准Event方法

 

五、DOM节点

　　1、创建节点

　　　　createElement(”div“)　　

　　　　createTexeNode（”content“）　　

var para=document.createElement("p");               //创建元素节点 
var node=document.createTextNode("段落内容")    //文本节点创建

　　2、插入节点appendChild()　　

para.appendChild(node);

　　3、删除节点 removeChild（）　　

<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>