DOM对象

最新推荐文章于 2024-07-23 16:19:32 发布

LiangJGo

最新推荐文章于 2024-07-23 16:19:32 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/LiangJGo/article/details/80141127

版权

DOM Document Object Model 文档对象模型

功能：用来控制页面中的内容，可以通过操作对象来控制页面内容

dom本质就是将文档中的所有内容封装成对象

例如下面的一个文档

<html>
<head>
   <title>itcast</title>
</head>
<body>
    <div>itcast</div>
</body>
</html>

对象的获取

document对象文档对象，其他对象的父亲

var doc = window.document;

element对象 4种获取方式

var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementById("one");
var div3 = document.getElementsByClassName("two")[0];
var div4 = document.getElementsByName("three")[0];

为对象添加点击事件两种方式

//1、获取要添加的元素对象

var one = document.getElementById("one");

//2、添加事件函数属性

one.οnclick=function(event){ //****event参数是事件被触发时系统传回来的事件源

altert("haha");

}

方式2：直接在html中的onclick属性中执行js代码

事件类型：

刚才的onclick

onblur() //失去焦点

onfocus() //得到焦点

onchange(); //内容发生改变是触发

onkeydown() //按下键盘按键触发，配合事件源event的keyCode属性判断点击的是哪一个按键

onkeypress()

onkeyup()

onload() //当页面加载完成时调用

onmousedown //鼠标点击时回调

onmouseup //鼠标抬起时回调

onmouseout //鼠标离开指定区域时

onmouseover //鼠标进入指定区域时

onmousemove //鼠标在指定区域内，会不断回调

onsubmit(); //表单提交

使用

<form action="#" id="form1">
  			user:<input type="text"></input>
  			<input type="submit" id="sub"></input>
  		</form>

创建表单对象

var form1 = document.getElementById("form1");

form1.οnsubmit=function(event){

//校验

//通过校验
return true;
//不通过校验拦截提交，两种方式，
//alert("submit faild");
1、return false;
2、event.preventDefault(); //阻止浏览器执行默认操作

}

event还有一个方法

event.stopPropagation(); //阻止事件向外传播

在子标签中的点击事件会传播到父标签中，有时候不想让事件进行传播，则可以调用

event.stopPropagation();