首页 > 代码库 > BOM和DOM(精简版)

BOM和DOM(精简版)

2024-08-16 14:36:37   219人阅读

一、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="http://www.mamicode.com/innerHTML" type="button" OnClick="alert(div.innerHTML);">
            <input name="outerHTML" value="http://www.mamicode.com/outerHTML" type="button" OnClick="alert(div.outerHTML);">
            <input name="innerText" value="http://www.mamicode.com/innerText" type="button" OnClick="alert(div.innerText);">
            <input name="outerText" value="http://www.mamicode.com/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（按下鼠标） onm ouseup（释放鼠标） onclick（完成鼠标点击）

onmousemove（移入）  onm ouseout（移出）

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 完成过渡后触发。

 

 

 



BOM和DOM(精简版)


联系
我们