DOM(Document Object Model):
JS中通过DOM来对HTML文档进行操作。Document表示的就是整个的HTML网页文档;Object表示将网页中的每一个部分都转换为了一个对象;使用Model表示对象之间的关系,方便我们获取对象
节点Node——构成HTML文档的最基本单元,常用节点分为四类:文档节点(整个HTML文档)、元素节点(HTML文档中的HTML标签)、属性节点(元素的属性)、文本节点(HTML标签中的文本内容)
节点的属性 | nodeName | nodeType | nodeValue |
文档节点 | #document | 9 | null |
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
浏览器已经为我们提供文档节点对象,这个对象是window属性,可以在页面中直接使用,文档节点代表的是整个网页
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//获取到button对象
var btn=document.getElementById("btn");
//修改按钮文字
btn.innerHTML="I'm button";
//innerHTML属性可以获取到元素内部的html代码
</script>
</body>
innerText属性可以获取到元素内部的文本内容,与innerHTML类似,不同的是它会自动将html标签去除
事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,JavaScript和HTML的交互是通过事件实现的
<button id="btn" onclick="alert('点我干嘛');">我是一个按钮</button>
//这种写法称为结构和行为耦合,不方便维护,不推荐使用
可以为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时,对应的函数将会被调用
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//获取按钮对象
var btn=document.getElementById("btn");
//绑定一个单击事件
btn.onclick=funtion(){
alert("你还点");
};
</script>
浏览器加载页面时自上向下加载,读取一行运行一行,如果将script标签写在页面顶端,在代码执行时,页面还没有加载,onload事件可以在整个页面加载完成后才触发,添加该事件可以确保代码执行时所有的DOM对象已经加载完毕了
<script type="text/javascript">
window.onload=funtion(){
//获取ID为btn的按钮
var btn=document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick=function(){
alert("hello");
};
};
</script>
<body>
<button id="btn">我是一个按钮</button>
</body>
获取元素节点(通过document对象调用):
1.getElementById(“id属性”),通过id属性获取一个元素节点对象
2.getElementsByTagName(“标签名”),通过标签名获取一组元素节点对象,此方法会返回一个类数组对象,所有查询到的元素都会封装到对象中
3.getElementsByName(“name属性”),通过name属性获取一组元素节点对象
如果需要读取元素节点属性,直接使用:元素.属性名,但读取class属性需要使用:元素.className
获取元素的子节点(通过具体的元素节点调用):
1.getElementsByTagName()方法,返回当前节点的指定标签名后代节点
2.childNodes属性,表示当前节点的所有子节点,此属性会获取包括文本节点在内的所有节点,DOM会将标签间空白当成文本节点,但在IE8及以下浏览器中不会。children属性可以获取当前元素的所有子元素
3.firstChild属性,表示当前节点的第一个子节点,可以获取到当前元素的第一个子节点(包括空白文本节点)。firstElementChild可以获取当前元素的第一个子元素(不包括空白文本节点),但不支持IE8及以下浏览器
4.lastChild属性,表示当前节点的最后一个子节点
获取父亲节点和兄弟节点(通过具体的节点调用):
1.parentNode属性,表示当前节点的父节点
2.previousSibling属性,表示当前节点的前一个兄弟节点(也可能获取到空白文本),previousElementSibling获取前一个兄弟元素,IE8及以下不支持
3.nextSibling属性,表示当前节点的后一个兄弟节点
(作者观看的学习视频:B站尚硅谷)