一、DOM
DOM定义
DOM全称:Document Object Model 文档对象模型。
JS中通过DOM来对HTML文档进行操作。
文档: 表示的就是整个HTML网页文档;
对象: 表示将网页中的每一个部分都转换为了一个对象;
模型: 使用模型来表示对象之间的关系,这样方便我们获取对象。
二、节点
节点定义
节点(Node)------构成HTML文档最基本的单元。
常用节点分为四类:
文档节点:整个HTML文档;
元素节点:HTML文档中的HTML标签;
属性节点:元素的属性;
文本节点:HTML标签中的文本内容。
三、事件
事件的简介
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
比如:点击按钮,鼠标移动,关闭窗口…
我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码就会执行。
注意:js和html代码不要写在一起,这种写法我们成为结构和行为耦合,不方便维护,不推荐使用。
四、文档的加载
注意: 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。
解决方法:
1.将js标签写到下面;
2.将js标签写上面但是要加一个window.οnlοad=function(){}
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
五、常用的语句
1.getElementById()
通过id属性获取一个元素节点对象
2. getElementsByTagName()
通过标签名获取一组元素节点对象
3. getElementsByName()
通过name属性获取一组元素节点对象