JavaScript DOM笔记
2016-05-19 本文已影响49人
Dev_hell03W
1. html dom 简介
dom: document, 当网页被夹在时, 浏览器会创建页面的文档对象模型(Document Object Model).
- JavaScript能够改变页面中所有的HTML元素.
- JavaScript能够改变页面中所有的HTML属性.
- JavaScript能够改变页面中所有CSS样式.
- JavaScript能够对页面中所有事件作出反应.
通过JavaScript查找HTMl元素有三种方法:
// 通过id查找元素
var x = document.getElementBtId("intro"); //如果找到以对象方式返回病存储在变量`x`中; 如果没找到, 则x将包含null.
//通过标签名查找元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
//通过类名查找元素
var x=document.getElementsByClassName("intro");
2. Dom Html
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<body>
<script>
document.write(Date());
</script>
</body>
//绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
改变HTML内容:
document.getElementById(id).innerHTML=new HTML
改变HTML属性:
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
改变HTML样式:
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
一些DOm方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
3. DOM事件
HTML DOM使JavaScript有能力对HTML事件作出反应.
onload 和 onunload 事件:
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
其它常用事件:
- onchange: 当用户输入字段时候调用, 输入框文本有变化时候调用.
- onmouseover : 当用户鼠标移到HTML元素上时候调用.
- onmouseout : 当用户鼠标移出HTML元素时候调用.
- onmousedown: 当用户按下鼠标触发.
- onmouseup : 当用户松开鼠标触发.
- onclick : 当用户完成一个点击(onmousedown + onmouseup)触发.
- onfocus: HTML元素获取焦点时候触发的事件.
