zoukankan      html  css  js  c++  java
  • BOM和DOM(精简版)

    一、BOM

    1、browser object model的缩写,简称浏览器对象模型

    2、提供与浏览器窗口进行交互的对象

    3、核心对象:window。除此之外还有:history,localtion,navigator等

    4、BOM由一系列对象构成,并且每个对象都提供了很多方法与属性

    5、BOM最初是Netspace浏览器标准的一部分

    二、DOM

    1、DOM是文档对象模型

    2、获取HTML元素的最基本的三种方式:getElementById,getElementsByTagName,getElementsByClassName

    3、关于HTML属性的几点:

         (1)修改HTML元素文本值用innerHTML属性(innerText属性)。

                <body>    

                <p><div id="div" style="border:1px #ff0000 dashed;"><span>这是一个层</span></div>
                <input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
                <input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
                <input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
                <input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
                <br>
                innerHTML 设置或获取位于对象起始和结束标签内的 HTML <br>
                outerHTML 设置或获取对象及其内容的 HTML 形式 <br>
                innerText 设置或获取位于对象起始和结束标签内的文本 <br>
                outerText 设置(包括标签)或获取(不包括标签)对象的文本 <br><br>
                </body>

            (2)如需改变 HTML 元素的属性:document.getElementById(id).attribute=新属性值

            (3)改变css样式:document.getElementById(id).style.property=新样式

                                 例如:document.getElementById("p2").style.color="blue";

                                         document.getElementById("p2").style.fontFamily="Arial";

                                         document.getElementById("p2").style.fontSize="larger";

    4、DOM元素(节点):即节点的增删改

    a)  添加节点:

    A.首先首先创建文本节点createTextNode

    B.再创建该元素(元素节点):createElement

    C.接着必须创建该元素节点这个文本节点:para.appendChild(node);

    D.然后一个已存在的元素元素: appendChild            element.appendChild(para);

    b) 删除节点:[ DOM 需要清楚您需要删除的元素,以及它的父元素。]

    A.首先找到你要删除的节点元素:var parent=document.getElementById("div1");

    B.再找到你要删除节点的父元素:var child=document.getElementById("p1");

                                             常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素。

    C.开删(从父元素中删除子元素):removeChild                  parent.removeChild(child);

    c) 替换

    A.找到要被替换的节点:var liTag = document.getElementById("apple");

    B.创建替换节点:var textNode = document.createTextNode("平安果");

    C.开始替换:liTag.replaceChild(textNode,liTag.firstChild);//firstChild指的是ID为apple的第一个孩子,而后面的就不能再被替换。

    d) 在指定元素之前插入:insertBefore

    e)在指定元素之后插入:

     A.extSibling返回相同节点树层级的下一个节

     B.insertBefore

    5、DOM事件:

    a)  常用的:

    onclick(单击)  ondblclick(双击)

    onmou wn(按下鼠标) onmouseup(释放鼠标) onclick(完成鼠标点击)

    onmousemove(移入)  onmouseout(移出)

    onkeydown (键盘按键被按下) onkeypress(键盘按键被按下并松开) onkeyup (键盘按键被松开)

    onload    onunload(用户退出页面。 ( <body> 和 <frameset>))

    onfocus    onblur

    target      返回触发此事件的元素(事件的目标节点)。

    type        返回当前 Event 对象表示的事件的名称。

    addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent())

    removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent())

    button     返回当事件被触发时,哪个鼠标按钮被点击。      

    clientX   返回当事件被触发时,鼠标指针的水平坐标。      

    clientY    返回当事件被触发时,鼠标指针的垂直坐标。

    screenX 返回当某个事件被触发时,鼠标指针的水平坐标。      

    screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。

    shiftKey          返回当事件被触发时,"SHIFT" 键是否被按下。

    keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。

    which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。

    onresize(窗口或框架被重新调整大小)

    onsearch(用户向搜索域输入文本时触发 ( <input="search">))

    onsubmit(表单提交时触发)

    onselect

    (用户选取文本时触发 ( <input> 和 <textarea>)

    oninput(元素获取用户输入时触发)

    onreset(表单重置时触发)

    onpause 事件在视频/音频(audio/video)暂停时触发。        

    onplay    事件在视频/音频(audio/video)开始播放时触发。

    transitionend 该事件在 CSS 完成过渡后触发。



  • 相关阅读:
    flash播放器插件与flash播放器的区别
    FLASH动作脚本详解
    flash代码
    LitJson使用中需要注意的一些问题(转)
    AS3中ASCII码和字符互转函数
    JQuery直接调用asp.net后台WebMethod方法(转)
    C#文件操作
    js延迟执行
    js操作表格、table、
    定时任务、js定时任务
  • 原文地址:https://www.cnblogs.com/1124592765qq/p/5959554.html
Copyright © 2011-2022 走看看