JavaScript DOM&BOM

1.DOM含义

D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象
O:Object 对象
JavaScript语言里对象可以分为三种类型:
(1)用户定义的对象(user-defined object) 有程序员自己创建的对象
(2)内建对象(native object) 内建在JavaScript语言里的对象,如Array、Math、Date等
(3)宿主对象(host object) 由浏览器提供的对象,如 window对象
M: 模型,文档的表现形式。
2.DOM操作节点方法

(1)getElementById(id)

这个方法返回一个对象,这个对象对应着document对象里一个独一无二的元素。

(2)getElementsByTagName(tag);

getElementsByTagName方法会返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。参数tag就是文档的标签,比如body、ul、ui等标签。

(3)getElementsByClassName(class);

HTML5 DOM中新增的一个方法。这个方法能够通过class属性来访问元素。该方法返回的也是数组。 

如果你想输入多个className可以用空格隔开。

(5)childNodes获取节点下的所有类型的子元素,该属性返回一个数组

文档里的节点不止元素节点、文本节点,属性节点三个类型的节点。文档里几乎每一样东西都是一个节点。甚至连空格和换行都会被解释为节点,而他们也会全部包含在childNodes属性返回的数组当中。
上面我们通过getElementsByTagName(““)也可以获取某个节点下子元素, 注意getElementsByTagName(““)返回的不仅仅是直接子节点,如果子节点包含了节点,也会计算在内的。
虽然childNodes返回所有类型的节点,我们可以通过nodeType获取节点的类型,但是该属性只返回整形。

(6)nodeType 节点的类型
元素节点的nodeType属性值是1.
属性节点的nodeType属性值是2.
文本节点的nodeType属性值是3.
也就这是三个节点有使用价值。

(7)nodeValue 属性返回文本节点的值。
比如要获取<p id="xxx">我是标签p里的值</p>里面的文本的值,其实这里包含了两个节点,一个元素节点p和里面的文本节点,可以通过下面方式获取里面的文本:

document.getElementById("xxx").childNodes[0].nodeValue; //document.getElementById("xxx").firstNode.nodeValue;
nodeValue除了可以获取文本节点的值,还可以修改文本节点的值,如:
p1.firstChild.nodeValue = "通过nodeValue设置新的值"

(8)firstChild 和 lastChild 获取节点数组中首尾节点
var e = document.getElementById(“xxx”);
e.firstChild 相当于 e.childNodes[0]
e.lastChild 相当于 e.childNodes[e.childNodes.length-1]

BOM操作的常用属性和方法

 

open():打开一个新的页面,格式为open(页面的url,打开的方式),如果url为空则打开一个空白页面。如果打开方式为空,默认为新窗口方式打开。这个方法返回新窗口的window对象。

close():关闭一个页面,但是这个方法有点兼容性问题,firefox默认无法关闭,chrome默认直接关闭,ie:询问用户。

navigator.userAgent:返回浏览器的名称和版本。

location:浏览器地址信息,本身不是字符串,是object格式。

location:就是url地址本身。

location.search:url中?后面的内容。

location.hash:url中#后面的内容。

窗口尺寸与大小
可视区的尺寸:document.documentElement.clientWidth和document.documentElement.clientHeight。

滚动条滚动的距离:document.documentElement.scrollTop和document.documentElement.scrollLeft。在chrome浏览器中要使用document.body.scrollTop和document.body.scrollLeft。

元素内容的宽高:div.scrollHeight和div.scrollWidth。

文档的宽高:document.documentElement.offsetHeight和document.documentElement.offsetWidth。也可以使用document.body.offsetHeight和document.body.offsetWidth。

事件
onscroll:当滚动条滚动的时候触发。

onresize:当浏览器尺寸改变的时候触发。

onfocus:当元素获取焦点时触发。

onblur:当元素失去焦点时触发。

focus():给元素设置焦点。

blur():让元素失去焦点。

select():选择指定元素里面的文本内容。只能选择用户可以输入的内容。

onmousemove:鼠标在一个元素上移动时触发。

onkeydown:当键盘按键按下的时候触发。能够响应用户输入的元素才支持键盘事件,和焦点事件一样。如果按下不抬起来会连续触发。

onkeyup:当键盘按键抬起时触发。

oncontextmenu:当右键菜单显示出来时触发。

event事件对象:当一个事件发生时,这个对象发生的这个事件有关的一些详细的信息都会临时保存到event对象中,以便在需要时使用。

猜你喜欢

转载自www.cnblogs.com/zl1234/p/9852292.html