DOM

一、知识回顾
* BOM 概述
* BOM 的各个对象
* window对象
innerHeight,innerWidth
document.body.clientWidth,document.body.clientHeight,
self
opener :超链和window.open()
parent : iframe和frame
frames[]:

            三种对话框: alert(),prompt(),confirm()
            定时器: setTimeout(),setInterval() 
            
            模态窗口: showModalDialog() ,showModelessDialog() 
    
    *  History对象
            forward() ,back(),go()
    *  Location对象.

二、内容
* 事件(掌握,明白每个事件发生的时机)
鼠标移动事件
* onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
* onmouseover : 鼠标悬停事件
鼠标悬停事件: 当鼠标移动到某个控件上面的时候发生
this: 把this写在那个标签里面就代表那个标签对象
this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.

         示例: 当鼠标移动到p标签上的时候,p标签改变样式  (参见demo01_鼠标悬停事件.html)
    * onmouseout : 鼠标移出事件
        鼠标移开事件: 当鼠标从控件上移开的时候
        示例参见(demo_02_鼠标移开事件.html ;
        
* 鼠标点击事件
    onclick : 当鼠标单击某个控件时发生
        示例: 当单击按钮时,在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
        
* 加载与卸载事件 
    onload ,onunload
        加载事件(onload) : 在整个页面的元素加载完毕之后发生
        卸载事件(onunload) : 是在页面关闭时发生 
          注意: onload和onunload事件必须写在body或者图片标签里面
          示例参见(demo04_加载卸载事件.html)
          
* 聚焦与离焦事件
    onfocus, onblur
        聚焦事件:是在控件获得焦点的时候发生
        离焦事件:是在控件失去焦点的时候发生

        示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
        
* 键盘事件
    onkeypress,onkeyup,onkeydown
        onkeypress: 按下键盘按键并松开
        onkeydown : 按下按键发生
        onkeyup: 松开按键
        
        示例参见(demo06_键盘事件.html`)

* 提交与重置事件
    onsubmit,onreset
    提交事件: 是在点击提交按钮后发生。(必须写在form表单中)
    重置事件: 是在点重置交按钮后发生。

    示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据(参见demo07_提交重置事件.html)

        
* 选择与改变事件
    onselect:
    onchange:
    
    onselect: 只能用于输入框. 当选择输入框中的文本时发生
    onchange: 用于select和文本框.
                对于下拉框是在选项发生变化的时候发生
                对于文本框是在文本框的内容发生变化并且失去焦点时发生

        示例: 当选择文本框的内容时,弹出文本框的内容
        下拉框的selectedIndex属性:代表选中某项的索引 
        参见(demo08_选择与改变事件.html)

DOM技术
1.Dom概述?
* 什么是DOM? docuemnt object model 文档对象模型
* 它的作用? 重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目
* 分类?
Core DOM : 定义了一套标准的针对任何结构化文档的对象
XML DOM : 定义了一套标准的针对 XML 文档的对象
HTML DOM : 定义了一套标准的针对 HTML 文档的对象。
*.xml介绍?
expensible markup language : 可扩展标记语言.
<penson>
<name>张无忌</name>
<age>23</age>
</person>

2.DOM树
* 结点 : 文档中的每个成分都是一个节点.(包括文本也是节点)
*.结点的属性
a. nodeName(节点名称)
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

    b. nodeValue(节点值) 
        对于文本节点,nodeValue 属性包含文本。
        对于属性节点,nodeValue 属性包含属性值。
        nodeValue 属性对于文档节点和元素节点是不可用的。

    c. nodeType(节点类型)  : nodeType 属性可返回节点的类型。
        标签节点的类型值是 1
        属性节点的类型值是 2
        文本节点的类型值是 3

*. 结点的分类
        整个文档是一个文档节点 
        每个 XML 标签是一个元素节点 
        包含在 XML 元素中的文本是文本节点 
        每一个 XML 属性是一个属性节点 
        注释属于注释节点 

*.结点的关系
        只有父子和兄弟关系
        parentNode  : 父节点
        childNodes  :所有的子标签
        firstChild  :第一个儿子
        lastChild  :最后一个儿子
        nextSibling :下一个兄弟节点
        previousSibling : 上一个兄弟节点

*. 对结点进行CRUD操作
    *.查找结点?
        两种方式: a. 采用节点之间的关系去拿 根节点: document.documentElement ;
                   b. 采用方法去拿
                         getElementById() : 根据标签的ID拿到此标签节点
                         getElementsByTagName() : 根据标签的名字拿到此标签节点数组
                         getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。
            
            以上示例参看:示例二. demo09_演示DOM节点属性并获取节点的方法.html;
                         示例二。demo10_示例一获取h1标签内容.html                         
                         
    *.删除结点?
        removeChild() : 采用父节点删除子节点
        参见示例()
    
    *创建节点:
        document.createElement()  : 创建一个标签节点
                参见 demo15_表格添加行.html
        docuemnt.createTextNode("内容") :创建一个文本节点
                参见 demo14_添加节点.html
        节点的setAttribute() :添加属性节点
                参见 demo14_添加节点.html
                
    *.添加结点?
        appendChild() : 添加子节点
            参见 demo14_添加节点.html
            参见 demo15_表格添加行.html
            
    *.修改或替换结点?
        replaceNode(): 替换节点(适用于IE)
        replaceChild() : 替换子节点
        
            参见demo13_节点的替换.html



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

推荐阅读更多精彩内容