JavaWeb课程系列
3.8正确的js加载方式
文档加载完成后加载js
所以我们以后写js的时候，请把他包在window.onload 的响应函数里，表示文档加载完成后会执行函数里面的代码。
<script type=”text/javascript”>
window.onload = function(){
//js代码
}
</script>
4．dom操作
4.1什么是DOM：
Document Object Modal(文档对象模型)，我们浏览器把整个网页会当成一个大的对象，利用面向对象的方式操作网页内容。
4.2 DOM模型：
4.3 document对象
document对象时window对象的一个属性，代表当前整个HTML文档，将这个文档抽象成了document对象，包含了整个dom树的所有内容。
其本质是window.document，而window.可以省略。直接使用document
4.4 DOM查询
元素查询
|
功能 |
API |
返回值 |
|
●在整个文档范围内查询元素节点 |
||
|
根据id值查询 |
document.getElementById(“id值”) |
一个具体的元素节点 |
|
根据标签名查询 |
document.getElementsByTagName(“标签名”) |
元素节点数组 |
|
根据name属性值查询 |
document.getElementsByName(“name值”) |
元素节点数组 |
|
|
||
|
●在具体元素节点范围内查找子节点 |
||
|
查找全部子节点 |
element.childNodes【W3C考虑换行，IE≤9不考虑】 |
节点数组 |
|
查找第一个子节点 |
element.firstChild【W3C考虑换行，IE≤9不考虑】 |
节点对象 |
|
查找最后一个子节点 |
element.lastChild【W3C考虑换行，IE≤9不考虑】 |
节点对象 |
|
查找指定标签名的子节点 |
element.getElementsByTagName(“标签名”) |
元素节点数组 |
|
|
||
|
●查找指定元素节点的父节点：element.parentNode |
||
|
|
||
|
●查找指定元素节点的兄弟节点 |
||
|
查找前一个兄弟节点 |
node.previousSibling【W3C考虑换行，IE≤9不考虑】 |
节点对象 |
|
查找后一个兄弟节点 |
node.nextSibling【W3C考虑换行，IE≤9不考虑】 |
节点对象 |
4.5属性操作
1）读取属性值
元素对象.属性名
2）修改属性值
元素对象.属性名=新的属性值
4.6文本操作
1）读取文本值：element.firstChild.nodeValue
2）修改文本值：element.firstChild.nodeValue=新文本值
