js中的DOM对象

最新推荐文章于 2022-09-14 21:17:15 发布

原创最新推荐文章于 2022-09-14 21:17:15 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #javascript

java学习专栏收录该内容

61 篇文章

订阅专栏

这篇博客介绍了DOM（文档对象模型）的概念，它是HTML和XML文档的结构化表示，便于节点操作。文中列举了常见的JavaScript事件，如onload、onclick等，并展示了两种事件绑定方式：直接在标签中绑定和通过ID获取元素绑定。还提到了JavaScript代码执行顺序和页面加载完成后的绑定方法。最后指出，虽然原生JS操作DOM有些繁琐，但现有许多优秀的框架简化了这一过程。

DOM【Document Object Model】：文档对象模型。就是根据文档的标签层次在内存中形成的一个树状结构对象，就是为了方便操作节点

===================================================================
常用事件

onabort：用户终止页面加载。
onblur：失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus（和onblur相反）用户获得焦点。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。
onmousedown 用户按鼠标按钮。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。

事件的两个绑定方法
1、直接在标签中写

<input type="button" id="btn1" value="我点" onclick="$btn1();" />

<script type="text/javascript">
function $btn1() {
	console.debug('我点了');
}
</script>

2、根据Id获取元素来绑定

<input type="button" id="btn2" value="我点2" />

<script type="text/javascript">
var $btn2 = document.getElementById("btn2");//通过标签的id属性来获取对应节点
$btn2.onclick = function() {//匿名方法
	console.debug('我又点了');
}
</script>

但是这种绑定是有代码顺序要求的，js代码必须放在html之后，因为代码的执行顺序是从上到下，所以若js放在前面，那么是无法根据节点id来获取元素的

另一个解决方法：等待页面加载完毕之后（οnlοad），再执行js代码

<script type="text/javascript">
	window.οnlοad=function(){ 
    	alert("页面加载完成！"); 
	} 
</script>

js其实很简单，但是用起来还是有点麻烦，现在已经有很多对其进行封装的优秀框架，很香的~