DOM:
(Document Object Model)文档对象模型
模型:
浏览器在加载一个页面时,是按照自上而下的顺序加载的,读取到一行就运行一行。如果将script标签写到页面上面,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获得DOM对象。
***load***事件会在整个页面加载完成后才出发。
为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行。这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
1.getElementsByid()返回一个HTML元素对象: object HMTLElement
2.getElementsByTagName()返回一个类数组对象,所有查询到的元素都会封装到对象中:object HTMLCollection
3.getElementByName():返回所在name元素对象。
4.innerHTML用于获取元素内部的HTML代码,对于自结束标签,这个属性没有意义。要用元素内属性。注意!!:class属性不能采取这种方式,读取class属性需要用.className
1.元素h节点内的getElementsByName():获取元素内的标签节点
2.childNodes:属性会获取包括文本节点在内的所有节点,DOM标签与标签之间空白部分也会当成text文本节点。
3.children:属性会获取当前元素的所有子元素
InnerText:
与innerHTML类似,但是他会自动把html标签去除。
剩余一些DOM方法
在document中有一个属性, 它保存的是body的引用。
var body = document.body;
document.documentElement
保存的是Html标签
document.querySelector()
:
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象,虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替 。使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个元素,用querySelectorAll可以将全部元素封装为数组返回。
事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息。
event.clientX,evnet.clientY
可以获取鼠标指针的水平与垂直坐标。
event.cancelBubble = true:取消冒泡
事件的委派
我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素。
事件的委派指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
事件的绑定
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符串,不要On
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false.
4.它的this是绑定事件的对象
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数。
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行。
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反。
定义一个函数,用来为指定元素绑定响应函数
参数:
obj:要绑定事件的对象
evenStr 事件的字符串
callback 回调函数