关闭

js-DOM总结

91人阅读 评论(0) 收藏 举报
分类:
DOM的官方定义:DOM可以使脚本,动态的访问或操作,网页的内容、网页外观、网页结构。
DOM的分类
l    核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。
l    HTML DOM(元素对象):针对HTML文档提供的专用的属性方法。
l    XML DOM:针对XML文档提供的专用的属性和方法。(就业班讲)
l    CSS DOM:提供了操作CSS的属性和方法。
            Event DOM:事件对象模型。如:onclick、 onload等
  每个html标记对象的属性可以分为三大类:核心DOM的属性和方法,元素对象的属性和方法,html标记本身的属性
1、核心DOM 节点访问
nodeName:节点名称。
nodeValue:节点的值。只有文本节点才有值,元素节点没有值。nodeValue的值只能是“纯文本”,不能含有任何的HTML标记或CSS属性。
firstChild:第1个子节点。
lastChild:最后1个子节点。
childNodes:子节点列表,是一个数组。
parentNode:父节点。
2、对节点的属性操作
l    setAttribute(name,value):给某个节点添加一个属性。
l    getAttribute(name):获取某个节点属性的值。
            removeAttribute(name):删除某个节点的属性
3、节点的创建
l    document.createElement(tagName):创建一个指定的HTML标记,一个节点
u    tagName:是指不带尖括号的HTML标记名称。
u    举例:var imgObj = document.createElement(“img”)
l    parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下。
u    parentNode代表父节点,父节点必须存在。
u    childNode代表子节点。
u    举例:document.body.appendChild(imgObj)
l    parentNode.removeChild(childNode):删除某个父节点下的子节点。
u    parentNode代表父节点。
u    childNode代表要删除的子节点。
举例:document.body.removeChild(imgObj)

1.核心DOM中,提供的属性和方法,已经可以操作网页了。为什么还要有HTMLDOM呢?
如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分麻烦。
那么,HTMLDOM中就提供了通过id直接找节点的方法,而不用再HTML根节点开始。
HTML DOM访问HTML元素的方法(最常用)
1、getElementById()
l    功能:查找网页中指定id的元素对象。
l    语法:var obj = document.getElementById(id)
l    参数:id是指网页中标记的id属性的值。
l    返回值:返回一个元素对象。
l    举例:var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
l    功能:查找指定的HTML标记,返回一个数组。
l    语法:var arrObj = parentNode.getElementsByTagName(tagName)
l    参数:tagName是要查找的标记名称,不带尖括号。
l    返回值:返回一个数组。如果只有一个节点,也返回一个数组。
l    举例:var arrObj = ulObj.getElementsByTagName(“li”)
元素对象的属性
l    tagName:标签名称,与核心DOM中nodeName一样。
l    className:CSS类的样式。
l    id:同HTML标记id属性一样。
l    title:同HTML标记的title属性一样。
l    style:同HTML标记的style属性一样。
l    innerHTML:包含HTML标记中的所有的内容,包括HTML标记等。
l    offsetWidth:元素对象的可见宽度,不带px单位。
l    offsetHeight:元素对象的可见高度,不带px单位。
l    scrollWidth:元素对象的总宽度,包括滚动条中的内容,不带px单位。
l    scrollHeight:元素对象的总高度,包括滚动条中的内容,不带px单位。
l    scrollTop:指内容向上滚动上去了多少距离(有滚动条时才有效),默认值为0
l    scrollLeft:指内容向左滚动过去了多少距离(有滚动条时才有效)。


CSS DOM动态样式
使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如:imgObj.style.border = “1px solid red”
对于类样式,通过className来赋值。如:imgObj.className = “imgClass”
style对象
每个HTML标记,都有一个style属性。但这个style属性又是一个style对象。
那么,这个style对象的属性有哪些?style对象的属性,与CSS中的属性,一一对应。
因此,style对象用来代替CSS。
如:imgObj.style.border = “1px solid red”;
style对象属性与CSS属性的转换
1)    如果是一个单词,style对象属性,与CSS属性一样。
2)    如果是多个单词,第1单词全小写,后面每个单词首字母大写,并去掉中划线。
i.    divObj.style.backgroundColor = “red”;
ii.    divObj.style.backgroundImage = “url(images/bg.gfi)”;
iii.    divObj.style.fontSize = “18px”;
Event DOM:事件DOM
1、事件简介
    事件主要实现“用户与网页的交互”。
    当事件发生时,去执行JS功能代码。
l    当点击图片时(onClick),将图片放大两倍(JS代码)。
l    当网页加载完成时(onLoad),弹出一个小窗口。
l    当鼠标放到滚动文本上时(onMouseOver),文本停止滚动。
l    当向下拖动滚动条时(onscroll),文本向上滚动
2、常用事件
l    onload:当网页加载完成时。只能给<body>用。
l    onclick:当点击时,所有标记都适用。
l    onscroll:当拖动滚动条时
l    onmouseover:当鼠标放上时
l    onmouseout:当鼠标移开时
l    onsubmit:当提交表单时
l    onreset:当重置表单时
l    onfocus:当获得焦点时,把光标定位到文本框中。
l    onblur:当失去焦点时,把光标从文本框中移开。
l    onchange:当下拉列表内容改变时。用在下拉列表、上传文件。
l    onselect:当选中文本时。
l    onresize:当改变窗口大小时,发生的事件。
3、事件句柄属性
    HTML标记,都有相应的事件属性。
    每一个HTML标记,都对应一个元素对象。元素对象也具有相应的事件属性。
    但是,元素对象的事件属性应该是全小写。
    事件属性后面调用的一般是JS函数,通过JS函数来完成相应的功能。
表格对象的属性
一个<table>标记,对应一个table对象。
l    rows:获取一个表格所有的行构成的数组。
l    cells:获取一个行中所有单元格构成的数组。
1.Event对象简介
当事件发生时,向调用函数,传递一个event参数,这个event参数是一个事件对象。
该event对象中记录了当前事件发生的环境信息。如:单击时的坐标、事件类型等。
注意:这个event对象是“短暂”存在的,新的事件发生,新的event对象产生,原来的event对象消失了。
DOM中Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
(1)通过HTML标记的事件属性来传递event对象
在DOM中,event对象是作为事件调用函数时的参数,传递给函数的。
该event参数,是系统固定写法,全小写,不能加引号,它就是event对象参数。
IE中Event对象
IE中的event对象,是window对象的一个属性,可以通过window对象调用,而不需要传参数。如:window.event
2、DOM中Event对象属性
l    type:当前的事件类型
l    clientX和clientY:距离窗口左边和上边的距离
l    pageX和pageY:距离网页左边和上边的距离
screenX和screenY:距离屏幕左边和上边的距离
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10342次
    • 积分:791
    • 等级:
    • 排名:千里之外
    • 原创:71篇
    • 转载:14篇
    • 译文:0篇
    • 评论:0条
    文章分类