js中的DOM事件与对象

概念图

document.getElementById("bb");

根据id找到bb,只能找一个哦

var aa = document.getElementById("bb");

设一个变量aa,getElemenById,根据id找到bb,并赋值给aa;

var div2 = document.getElementsByClassName("bb")[0];

根据classname寻找到bb,并赋值给变量div2;找到的是一个数组哦;

var o_div3 = document.getElementsByTagName("div")[2];

根据div标签找,找到的是数组哦;

var div3 = document.getElementsByName("bb")[2];

根据name找到bb并赋值给div3,找到的也是数组

浏览器中的事件都是以对象的形式存在的;在获取了事件的对象后就可以通过它的一系列属性和方法处理各种事件,比如鼠标点击时间:

onclick="no()"

点击的时候执行一个方法,他叫no(),

带括号的都是方法,不带括号叫属性;

非表单元素的获取:

div3.innerText ="没错只能是文本"

innerText他只能获取文本,没错,很垃圾;

div3.innerHTML = ‘<span style="color: red;">这可不单单是获取了文本哦</span>‘

innerHTML他把标签里的代码和文字都获取了哦~

更改元素:

font.setAttribute("color","red");

没错,他把font标签里的color变成了red。

删除元素:

font.removeAttribute("color");

没错,他把font标签里的颜色给扔了:

制定一个方法

function hh() {
        var aa = document.getElementById("go");
        aa.removeAttribute("color");
    }

我制定了一个叫hh的方法,我让他通过id获取到go,然后把他扔给了aa。aa把里面的颜color扔掉了—  — !

火前留名!!

时间: 2024-11-10 01:33:39

js中的DOM事件与对象的相关文章

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

JS中的计时器事件

JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码. 2.setTimeout() - 暂停指定的毫秒数后执行指定的代码 并且,这两个方法都是window对象的方法. 首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码. 语法:window.setInterv

js中获取键盘事件

1 <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

在js中使用createElement创建HTML对象和元素 (转)

1.创建链接 <script language="javascript"> var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerHTML = text; a.style.color = "red"; o.appendChild(a); } createA(

js中的计时器事件`setTimeout()` 和 `setInterval()`

js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() ---- 间隔一定的时间之后执行 setInterval() ----每间隔一定的时间执行一次(重复性执行) setTimeout() 间隔一定的时间之后`执行指定的语句或函数. 例如:3s后跳转到前一个页面. <script type="text/javascript"> se

js中的DOM操作(一)——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!