【Java Script】 DOM对象

DOM:

(Document Object Model 文档对象模型)

概念:

标记语言文档各个组成部分 封装为对象

组成:

Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象

Document(文档对象):

获取

window.document

方法

  • 获取Element对象:
  1. getElementById(id属性值):
    通过id属性值获取唯一的元素
  2. getElementsByTagName(标签名称):
    通过标签名称获取元素对象数组
  3. getElementsByName(name属性值):
    通过name属性值获取元素对象数组
  4. getElementsByClassName(class属性值):
    通过class属性值获取元素对象数组
  • 创建其他对象:
  1. createElement():
    创建元素对象
  2. createAttribute():
    创建属性对象
  3. createComment():
    创建注释对象
  4. createTextNode():
    创建文本对象
  • 给属性对象设置值
    setAttribute('属性名','设置的属性值');
  • 删除
  1. remove():
    删除自己
  2. removeChild(要移除的子元素的Document对象):
    移除指定子元素
  3. removeAttribute("要移除的属性名"):
    根据属性名,移除指定属性
  4. removeAttributeNode(要移除的属性对象):
    根据属性对象,移除指定属性

Element(元素对象):

属性

  1. innerHTML属性:
    获取或设置 元素的 子内容(设置html标签)
  2. innerTEXT属性:
    获取标签之间的文本内容(只能设置标签间的文本内容)

事件:

概念

事件:一件事
事件源:事件发生的组件
监听器:一个对象(当事件源上发生了事件,就执行对象中的某些方法)
注册监听:将监听器绑定到事件源上,监听事件的发生

注册监听的方式:

  1. 在定义标签时,添加 事件名称属性。属性值是js代码
    js代码会被自动封装到一个function函数的方法体中
    例子:
    < div id="div_id" onclick="fun();">hehe< /div >
  2. 通过js获取元素对象,再添加事件
    例子:
    input.onclick = function(){
    //alert("hehe");
    }

事件的种类

  • 焦点事件:针对表单
  1. onfocus:
    元素获得焦点
  2. onblur:
    元素失去焦点
  • 点击事件
  1. onclick:
    当用户点击某个对象时调用的事件
  2. ondblclick:
    当用户双击某个对象时调用的事件
  • 键盘事件
  1. onkeydown:
    某个键盘按键被 按下
  2. onkeyup:
    某个键盘按键被 松开
  3. onkeypress:
    某个键盘按键被 按下并松开
  4. e.keyCode属性:
    获取键盘某个键的键码,其实就是该按键的ASCII编码
  • 鼠标事件
  1. onmousedown:
    鼠标按钮被按下
  2. onmouseup:
    鼠标按键 被松开
  3. onmouseover:
    鼠标 移到某元素之上
  4. onmouseout:
    鼠标 从某元素移开
  5. onmousemove:
    鼠标 被移动
  6. 鼠标按下时,通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号
    e.button属性:
    事件对象中的 button属性可以获取鼠标按键的编号
    e.which属性:
    也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
  • 表单事件
  1. onsubmit :
    确认 按钮被点击
  2. onreset:
    重置 按钮被点击
  3. oninput:
    当你往表单中输入内容时就触发
  • 加载 与 卸载 事件:
  1. onload:
    一张页面或一幅图像完成加载
  2. onunload:
    用户退出页面(仅IE支持,其他浏览器不支持)
  • 其他事件
    针对表单
  1. onchange:
    域的内容被改变(比如下拉框)
  2. onselect:
    文本被选中

event 的 属性和功能:

属性

  1. currentTarget:
    获取 绑定了该事件的元素对象
  2. target :
    获取 触发了该事件的元素对象
  3. type:
    获取 事件类型
  4. keyCode:
    当绑定了键盘事件,可以从事件对象中获取按键的键码(ASCII码)
  5. which/button:
    当绑定了鼠标事件,可以从事件对象中获取鼠标按键的键码
    0 左键 1滚轮 2右键

方法

e.stopPropagation():
阻止事件冒泡
e.preventDefault():
阻止元素的默认行为


那么,本篇博文的知识点在这里就讲解完毕了。
(请观看本人博文 —— 《Java Script 专栏总集篇》)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,473评论 1 11
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,419评论 0 4
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,499评论 0 11
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,318评论 0 8
  • DOM总结 1:DOM - document object model 文档对象模型 作用:给我们提供了一些方法...
    盒小饭stone阅读 586评论 0 0