js-DOM总结
2016-05-30 21:10
387 查看
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：距离屏幕左边和上边的距离
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：距离屏幕左边和上边的距离
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js代码加总结
- javascript闭包
- 3分钟理解JSON
- 如何理解Javscript中的函数调用和"this"
- [RxJS] Filtering operators: throttle and throttleTime
- 点击元素使其在毫秒内从不透明变为透明
- JavaScript JSON 学习笔记
- Package.json中dependencies依赖包中^符号和~符号前缀的区别
- js事件处理函数/监听函数
- (三) 浏览器内置对象及常用方法
- (二) JavaScript内置对象及常用方法
- javascript Function
- Jsoup解析html的基本用法
- 8年javascript知识点积累
- 《JavaScript学习笔记十》：无缝滚动的实现
- 《JavaScript学习笔记九》：延时框的实现
- 《JavaScript学习笔记八》：数字时钟的实现
- 轻量级图形报表工具JSCharts (JSChart)，内置函数中文参考
- 《JavaScript学习笔记七》：数组和可变参数arguments的介绍
- 《JavaScript学习笔记六》：取非行间样式