js-DOM总结
来源：互联网 发布：淘宝运作流程 编辑：程序博客网 时间：2024/05/20 16:45
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：距离屏幕左边和上边的距离
0 0
- JS Dom技巧总结
- JS Dom操作总结
- js-DOM总结
- JS-DOM总结
- JS之DOM基础知识总结
- js中的DOM常用语句总结
- DOM节点——JS总结
- js DOM 常用API方法总结
- JS学习总结之Core DOM
- js之DOM深入学习总结
- js基础学习之--DOM总结
- JavaScript学习总结【5】JS DOM
- js 高程学习总结 第十章 DOM
- js之DOM深入学习总结
- JS总结——DOM节点
- JS总结——DOM事件
- JS学习总结（二）- Dom编程
- js基本知识点总结-----js dom基本操作
- Qt中QString与数字类型的转换方法
- 1088. Rational Arithmetic (20)
- 微信硬件平台从入门到精通（服务器端）
- LeetCode-127.Word Ladder
- HBase安装
- js-DOM总结
- 哈理工OJ 1559 线段相交（计算几何）
- JQuerySelectors
- 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan" 可以让界面不被弹出的键盘挤上去。
- 深入理解Java的接口和抽象类
- Linux下出现No module named ..的原因
- 青蛙的约会<数论，extgcd>
- scala笔记（一）
- angular js知识总结
