DOM学习摘要（五）

1。DOM简介。

当页面加载时，浏览器创建的文档对象模型（文档对象模型）的页面，文档对象模型定义了一个标准的方法用于访问和处理HTML documents.dom呈现HTML文档作为一个元素、属性、文本，这是树形结构，节点树。通过DOM、JS可以创建动态网页，使网页显示动态效果和互动users.js可以改变所有的HTML元素，属性，并在页面的CSS样式和响应页面中的所有事件。所以学习JS的出发点是处理网页，和网页的过程中需要处理的DOM使用。

2，DOM得到元素。

如果JS想操作HTML元素，您必须首先找到元素：

html元素是由元素设置的id找到的。

HTML元素是由标签名找到的。

通过元素集（name）的名称查找HTML元素。

所谓DOM，实际上就是文档，而元素的获取就是文档的操作。

（1）通过id查找元素

方法：document.getelementbyid（'id'）；

通过标签信息一起，id属性的值是唯一的，就像相同的身份一样，通过身份证可以找到相应的，所以通过这种方法，你可以得到相应的标签，而获取的元素是JS中的一个对象，如果你想操作的元素是他所要求的属性或方法。

（2）通过标签名称查找元素

方法：document.getelementsbytagname（'tagname）；

通过这种方法，返回一组具有指定标记名的对象，该对象以数组形式返回，返回的顺序是文档中的顺序。

（3）通过名称查找元素

方法：document.getelementsbyname（'name'）；

This method is a bit similar to the getElementById () method. 它通过设置属性值来查找元素，但是这个方法通过设置name属性值来搜索元素。name属性在文档中可能不是唯一的，因此该方法返回一个元素数组，而不是元素。


获取txt元素的所有name值
无功otxt = document.getelementsbyname（txt）；
要获取的元素的数目
警报（otxt。长度）； / /返回：
获取第二个元素的值
警报（otxt { }。值）； / /返回：

因为你可以通过ID查找元素，你也可以通过类的元素。className属性用于设置或返回元素的类的名称。

语法：object.classname = 'classname

此方法可以控制类类名并返回元素的类属性。功能分配一个私有网页中的元素来改变元素的外观。

简单示例：皮肤效应

皮肤

体{
背景：浅绿色；
}
Col {。
背景：浅灰色；
}
Col {。
背景：浅蓝色；
}
Col {。
背景：紫罗兰；
}
Col {。
背景：粉红色；
}
Col {。
背景：# F；
}
点击开关：
var x = document.getelementbyid（哎）；
函数GR（）{
x.classname = 'col；
}
函数BL（）{
x.classname = 'col；
}
函数vi（）{
x.classname = 'col；
}
函数pi（）{
x.classname = 'col；
}
函数（或）{
x.classname = 'col；
}
这只是一个简单的切换背景色效果。如果你想改变网页的整体风格，你可以使用外部CSS文件，通过JS改变链接的href属性标签。

如果你想设置多个类的元素具有相同的样式，你需要方法来完成阵列的帮助下，这个原理其实很简单，首先通过身份进入到父元素，然后获得标签的父元素的所有子元素的名称，获得标签名称返回元件阵列，从而访问元素的方法一样，数组可以访问数组，然后第一个循环遍历元素的数组，来做判断，如果类名的类属性的元素设置为等于我们，我们要寻找的元素。

示例：序列表中所有类属性的元素背景颜色为设置为绿色。

热点
美味的食物
数字
科学与技术
社会学
健康
按ID获取父元素
无功美国在线= document.getelementbyid（O）；
通过标记名称获取所有子元素的父元素
VaR OLI = aol.getelementsbytagname（李的）；
通过返回的子数组元素循环
对于（var i =；i < oli.length；i++）{
如果当前元素 / /类名为类属性设置的值，将背景设置为绿色
如果（OLI {我}。类名= = 'col '）OLI {我}。风格背景＝绿色；
}

下面是一个封装函数，它通过类属性值获取元素，这很容易使用。

对getbyclass功能封装

第一个参数是获取第二类属性值的参数的父元素。
功能getbyclass（oparent，类）{
/ /空数组可以把所有的类名，发现存储在里面，最后返回。
VaR结果= { }；
通过标签名称获取所有子元素的父元素。标签名不是固定的，因此它被设置为*，因此很容易通过。
VaR的欧洲自由贸易联盟= oparent.getelementsbytagname（*）；
通过返回的子数组元素循环
对于（var i =；i < aele.length；i++）{
如果当前元素 / /类名等于阶级属性的值传递，它被添加到的价值。
如果（欧洲自由贸易联盟{我}。类名= =一类）aresult.push（欧洲自由贸易联盟{我}）；
}
最后返回数组
返回的结果；
}

热点
美味的食物
数字
科学与技术
社会学
健康
使用包函数：
第一个ID获取父元素
无功美国在线= document.getelementbyid（O）；
然后函数调用打包成参数、父元素、类属性值元素。
VAR协议= getbyclass（美国在线，'col）；
最后一个循环遍历，设置样式
对于（var i =；i < ocol.length；i++）{
{我}协议。风格背景＝绿色；
}
3、DOM操作。

获取HTML元素后，可以完成相应的操作。

（1）更改HTML

修改HTML内容使用innerHTML property.innerhtml顾名思义，最简单的方法，内是内在的，因为它是HTML，那么你可以把HTML在里面。这个属性可以用来取代HTML元素的内容。

语法：document.getelementbyid（ID）.innerHTML =新的HTML
原标题

更改原始标题
VaR啊= document.getelementbyid（'tit）；
啊。innerHTML =新标题；
创建html内容
无功odiv = document.getelementbyid（'div）；
ODiv。innerHTML =我一小时，我一个段落的标题；

（2）操作元素的属性

修改元件性能的最简单的方法是直接修改，语法：document.getelementbyid（ID）。属性名称=新值，如修改图像SRC属性的方向路径。

此外，可以通过DOM方法获得、添加和删除元素的属性。

（1）、中（）

getAttribute（）方法通过元素节点的属性名称获取属性的值。

语法：elementnode.getattribute（名字）叫你想获取元素节点的属性名称

（2），setAttribute（）

setAttribute（）方法添加一个新属性指定一个值，或者设置一个现有的属性指定的值。

语法：elementnode.setattribute（名称、值）的名字是属性名称和值是一个属性值。

（3）、removeattribute（）

的removeattribute（）方法移除一个元素的属性。

语法：elementnode.removeattribute（名字）的名字是一个属性的名字。

Javaｓｃｒｉｐｔ实例
无功otxt = document.getelementbyid（'txt）；
VaR的OBTN = document.getelementbyid（'btn）；
获取值属性按钮的值。
创建一个obtn.getattribute（价值）；
警报（a）；返回按钮
OBtn。onclick =函数（）{
有三种操作元素/属性的方法：
第一种方法
/ / otxt。值=请输入文本。
第二种方法
/ / otxt { } =价值请输入文本。
第三种方法
文本框修改值属性的值
otxt.setattribute（价值'，'请输入文本）；
删除按钮类型属性
obtn.removeattribute（）；
删除默认文本框
}；
（3）更改CSS

这个语法可以直接用来改变HTML元素的CSS样式：样式的document.getelementbyid（ID）。样式名=新样式

Javaｓｃｒｉｐｔ实例

# div {
高度：PX；
宽度：PX；
边界：PX固体黑；
填充：PX；
}
P {
线高：PX；
文本缩进：EM；
}
HTML DOM

js可以使网页添加动态效果并与用户交互。
js可以改变页面中的所有HTML元素。
js可以改变页面中的所有HTML属性。
js可以改变页面中所有HTML元素的CSS样式。

无功odiv = document.getelementbyid（'div）；
函数颜色（）{
odiv.style.color =白色；
odiv.style.fontfamily = 'microsoft雅黑；
odiv.style.backgroundcolor =绿色；
}
功能高（）{
odiv.style.width = 'px；
odiv.style.height = 'px；
odiv.style.border = 'px固体# CCC；
}
函数无（）{
odiv.style.display =不关；
}
函数块（）{
odiv.style.display =阻止；
}
/取消
函数取消（）{
VaR清洁=确认（'determine取消所有设置吗）；
如果（干净= TRUE）{
odiv.removeattribute（'style）；
}
}
上面的代码，它是由风格，是隔行扫描的方式。你可以使用Firefox的Firebug点击相应的按钮，你可以看到所有的CSS样式出现在排。

有没有一种更简洁的方式直接通过样式来获取和设置CSS样式可以使用内置的参数对象来使用JS函数，称为参数，是一个可变参数，不确定参数，变量个数，参数数组，没有那个参数名称，你可以访问它们，但是为了提高可读性，给参数名，也是很有必要的。

Javaｓｃｒｉｐｔ实例

获取行样式
函数css（）{
如果传递到的参数数
如果（参数=长度= =）{
返回第二个参数样式名值
返回参数{样式{参数}；
}
别的{
否则，它将被设置为
第二个参数样式名称值等于第三个参数。
参数{样式{参数} =参数{ }；
}
}

无功odiv = document.getelementbyid（'div）；
警报（CSS（odiv，'width '））； / /获取对象的宽度返回：PX
CSS（odiv，背景'，‘绿色'）； / /对象的背景颜色为绿色
下面是一个封装函数获取和设置后使用隔行方式。

得到隔行方式

功能的CSS（obj，名称，值）{
如果（参数=长度= =）{
{姓名}风格返回对象；
}
别的{
{姓名} = obj。风格的价值；
}
}
无功odiv = document.getelementbyid（'div）；
警报（CSS（odiv，'width '））； / / DIV的宽度
CSS（odiv，背景'，‘绿色'）； / /设置背景颜色在div
我们都知道在Web项目的实际开发中，我们必须遵循分离结果的原则，行为和行为，从而提高可读性，优化代码，方便后期维护。所以我们通常设置元素的风格，并不是所有的线。风格的使用方法是在DOM元素的样式属性的样式规则和风格是不够的阶级属性的外部样式表。你怎么非的元线的风格吗DOM标准有一个全球性的方法，getcomputedstyle，由当前对象的样式信息可以得到。例如：getcomputedstyle（obj，false）。PaddingLeft，你可以得到物体的左内侧缘。在这里，我们需要注意到，当我们得到元素的复合方式，我们必须用精确值，复合类型，如背景和边框。如果我们想得到元素的背景颜色，我们只使用背景犯错，我们必须写的背景颜色。

JS只能修改元素的行间的风格和不可修改的非线式，获得了如此多的人可能有问题，因为他们可以得到的，不能被修改，那么它有什么用。事实上，得到一个非线的风格是非常必要的，如果它是一个外部样式表，样式是一个密集的英语的存在，没有人会发现，什么回修改的元素，这似乎是一种浪费能源，所以方法尤为重要，并返回的值是准确的，通过获取方式信息的非线也有改变目前的风格元素更精确，这是一件多么美妙的行直接使用样式元素设置样式，因为最高优先级行样式，所以我覆盖了非行样式，也相当于修改了非行样式，显示在行中，我们的目的是达到。

获取非线型样式

# div {
宽度：PX；
高度：PX；
背景：红色；
边距顶部：PX；
}
窗口。指针函数（）{
无功odiv = document.getelementbyid（'div）；
警报（getcomputedstyle（odiv，false）。宽度）；
ODiv。宽度= 'px风格；
警报（getcomputedstyle（odiv，false）。高度）；
ODiv。高度= 'px风格；
/ /注意这里修改复合风格，使用背景，它可以用在FF视图之间特定的风格。
警报（getcomputedstyle（odiv，false）。BackgroundColor）；
ODiv。风格背景＝绿色；
}；
（4）对事件的反应

例子：选择和取消选择，输入相应的序号选择

Javaｓｃｒｉｐｔ实例
请选择你的爱好：
音乐
阅读
游泳
篮球。
足球
散步
杵状指。
购物
输入序列号选择，每次只能选择一个项目。

功能optall（）{
通过获取标记名称集选择
无功olist = document.getelementbyid（'list）；
VAR检查= olist.getelementsbytagname（输入的）；
对于（var i =；i < acheck.length；i++）{
如果（一{ } = = 'checkbox。型）{
检查{我}检查=真；
}
}
}
功能不（）{
通过name属性值设置来设置
VaR爱= document.getelementsbyname（爱）；
对于（var i =；i < alove.length；i++）{
如果（我爱{ }。型= = 'checkbox）{
我爱{ }。检查= false；
}
}
}
VaR的OBTN = document.getelementbyid（'btn）；
要获得添加按钮单击事件
obtn.onclick =函数（）{
获取文本框以输入值
无功otxt = document.getelementbyid（txt）的价值；
复选框id值的定义类似于.括号是字符串连接，而id +输入是文本框的值=元素的id值。
无功olike = document.getelementbyid（不是+ otxt）；
olike.checked =真；
}
3、DOM节点。

HTML文档可以说是一个节点集合，共有三个常见的DOM节点，即元素节点、属性节点和文本节点，元素节点是HTML标签，标签的属性是属性节点，文本节点是页面可以浏览的内容。

在文档对象模型中，每个节点都是一个对象。DOM节点有三个重要属性：节点的名称、节点的值和节点的类型。

（1）、节点名称：节点的名称

nodeName属性返回的节点名称元素节点的名称，标签名称相同。属性节点的名称是属性的名称。该文本节点的名字总是#文本。该文件的节点的名字总是#文件。

（2）、节点：节点的值

属性返回的节点的节点值的元素节点的值是undegined或null的属性节点的值的属性值，和文本节点的值是文本本身。

（3）、节点类型：节点类型

nodeType属性返回节点类型。以下是常见的节点类型：

js
DOM
无功节点= document.getelementsbytagname（李的）；
对于（var i =；i < nodes.length；i++）{
document.write（' + '（我+）名称节点+ {我}节点。节点名+）；
document.write（' + '（我+）节点的值为{ } +节点。节点值+）；
document.write（+型（I +）节点+ {我}节点。节点类型+）；
document.write（''）；
}
*
回归uff1a
第一个节点的名称是李。
第一个节点的值为空。
第一个节点的类型是
第一个节点的名称是李。
第一个节点的值为空。
第一个节点的类型是
* /

在JS函数可以嵌套，母函数的子函数，和HTML标签也可以嵌套。它显示了父节点、子节点和兄弟节点等多种节点关系，为了方便操作，DOM定义了一些节点的公共属性。

（1）、子

childNodes属性返回的子节点集合。长度属性可以用来返回子节点的数目，然后我们可以得到数组所需的信息。
VaR，= document.getelementbyid（U）；
警报（OUL。子。长度）； / /返回：

通过上面的代码，您可以看到返回是11。在UL下，只有5个LI元素，它如何返回11事实上，情况就是这样。
第一个节点（文本节点）
第一个节点（元素节点）节点（文本节点）
第一个节点（元素节点）节点（文本节点）
第一个节点（元素节点）节点（文本节点）
第一个节点（元素节点）节点（文本节点）
第一个节点（元素节点）节点（文本节点）
因为子节点的子集返回子属性不仅包括元素节点、文本节点，也。浏览将默认标签与文本节点之间的空白，并在空格中输入文本，文本将在浏览器中显示，因此建议使用子属性，该属性只返回元素节点，不包括文本节点，并且不包含带注释的节点。
我是一个文本节点
我是跨度元素。

VaR，= document.getelementbyid（U）；
警报（OUL。孩子。长度）； / /返回：

上面的代码中，5锂元素在UL，和返回的子节点的数目是5。孩子属性比childNodes属性要好的多，并且只返回该元素的子节点，它不包括孙子节点。

（2）第一子节点

孩子们的firstelementchild属性返回数组的第一个节点。

语法：node.firstelementchild此方法等效于：元。孩子{ 0 }

孩子们的lastelementchild属性返回数组的最后一个节点。

语法：node.lastelementchild这种方法是相对的：元。孩子{元。孩子length-1 }。

空白节点
js
DOM
jQuery
var x = document.getelementbyid（'div）；
document.write（'名称的第一个节点：+形式+ x.firstelementchild。）；
返回：第一个子节点名称：p
document.write（名字的最后一个节点：+ x.lastelementchild。形式）
返回：最后一个子节点名称：h

（3）父节点

其父节点属性用于获取指定节点的父节点。注：父节点只能有一个。祖先可以通过使用两个访问父节点得到的。

示例：单击子节点隐藏父节点

Javaｓｃｒｉｐｔ实例
AAA点击隐藏
BBB点击隐藏
CCC点击隐藏
DDD点击隐藏
EEE点击隐藏
VaR，= document.getelementbyid（U）；
父节点查看UL元素
警报（OUL。parentNode）； / /返回：{对象htmlbodyelement }
通过标记名称获取所有元素
VaR AA = document.getelementsbytagname（A）；
对于（var i =；i < aa.length；i++）{
AA {我}。onclick =函数（）{
当前节点隐藏的父节点
本。parentNode。风格显示=不关；
}；
}
的offsetparent属性可以返回一个元素的父的位置。

Javaｓｃｒｉｐｔ实例

# div {
宽度：PX；
高度：PX；
背景：绿色；
保证金：PX；
位置：相对；
}
# div {
宽度：PX；
高度：PX；
背景：红色；
位置：绝对；
左：PX；
上图：PX；
}

无功odiv = document.getelementbyid（'div）；
警报（odiv。offsetparent）；
返回：{对象 / / htmlbodyelement }
的 / / div父div，如果DIV的相对定位的注释取消了。然后返回：{对象htmldivelement }
（3）兄弟节点

的nextelementsibling属性返回的节点在同一层次的节点树。

语法：element.nextelementsibling

的previouselementsibling属性返回的节点是由在同一棵树的层次结构节点。

语法：element.previouselementsibling
节点类型
解释
价值
元结
每个HTML标记都是一个元素节点，例如。
一
属性节点
元素节点（HTML标签）的属性，如id、类、名称等。
二
文本节点
元素节点或属性节点中的文本内容。
三
注释节点
它表示文档注释的形式。
八
文档节点
表示整个文档（DOM树的根节点，即文档）。
九
示例：Li元素节点的兄弟关系

HTML
CSS
js
VaR阿里= document.getelementsbytagname（李的）；
跟踪获取节点第二个子节点
var x =阿里{ }。nextelementsibling；
警报（x.innerhtml / /）；返回：JS
在具有第二个子节点的
var x =阿里{ }。previouselementsibling；
警报（x.innerhtml / /）；返回：HTML

4、DOM应用程序。

DOM最实际的应用是通过js创建、插入和删除节点。

（1）创建一个节点

的createElement（）方法可以创建元素节点。

语法：document.createelement（TagName）

的作用是：（）方法可以插入一个新的子节点在指定节点的最后加上它每次结束。

语法：parent.appendchild（节点）

实例：创建并添加LI元素

Javaｓｃｒｉｐｔ实例

窗口。指针函数（）{
VaR的OBTN = document.getelementbyid（'btn）；
VaR，= document.getelementbyid（U）；
无功otxt = document.getelementbyid（'txt）；
文本框输入提示符
OTxt。请输入文本占位符=创造锂元素；
OBtn。onclick =函数（）{
创建李元素
VaR OLI = document.createelement（李的）；
创建元素来输入文本框的值
OLi otxt.value innerHTML =；
/ /成，母公司作为子节点，插入一个新的锂元素在创建的每个里结束了
oul.appendchild（OLI）；
/ / parent.appendcild（子节点）；
}；
}；


（2）插入节点

的作用是：在（）方法可以在现有的子节点插入一个新的子节点。

语法：对parent.insertbefore第一个参数（新节点，节点）是新的子节点被插入。二参数是原始的节点，这是之前插入的人。

实例：创建并添加LI元素，每个新创建的LI元素都插入到前面插入的李元素之前。

Javaｓｃｒｉｐｔ实例

窗口。指针函数（）{
VaR的OBTN = document.getelementbyid（'btn）；
VaR，= document.getelementbyid（U）；
无功otxt = document.getelementbyid（'txt）；
OBtn。onclick =函数（）{
创建李元素
VaR OLI = document.createelement（李的）；
获取所有李元素
VaR阿里= oul.getelementsbytagname（李的）；
OLi otxt.value innerHTML =；

这里要注意的是：页面不含LI元素，LI元素是由js创建的
因此，第一个子元素应该添加到父节点的最后一个子节点下。
然后基于节点节点，然后插入到一个节点中。

如果李元素不存在，则执行其他元素，将父元素转换为子节点。
如果已经创建的子元素中的元素数量，则在子节点之前插入它。
如果（阿里长>）{
oul.insertbefore（OLI，阿里{ }）；
}
别的{
oul.appendchild（OLI）；
}
}；
}；


（4）删除节点

的removechild（）方法用于删除一个节点

语法：parent.removechild（节点）的参数是一个孩子节点被删除。

示例：简单表添加和删除

Javaｓｃｒｉｐｔ实例

窗口。指针函数（）{
VaR OTAB = document.getelementbyid（'tab）；
无功oname = document.getelementbyid（用户的）；
无功oage = document.getelementbyid（时代）；
VaR的OBTN = document.getelementbyid（'btn）；
设置id的值。
var id = OTAB。tbodies { }。行。长度+；
OBtn。onclick =函数（）{
创建一个TR
VaR OTR = document.createelement（TR'）；
创建第一个TD（id）
VaR OTD = document.createelement（'td）；
获取ID，ID已被删除，无法重复使用。
OTD .innerHTML =身份+ +；
将在创建的TR中创建TD
otr.appendchild（OTD）；
创建第二个TD（名称）
VaR OTD = document.createelement（'td）；
innerHTML = oname.value OTD；
otr.appendchild（OTD）；
创建第三个TD（年龄）。
VaR OTD = document.createelement（'td）；
innerHTML = oage.value OTD；
otr.appendchild（OTD）；
创建第四个TD（操作）
VaR OTD = document.createelement（'td）；
OTD .innerHTML = 'delete；
otr.appendchild（OTD）；
OTd.getElementsByTagName（'a'）{ }。onclick =函数（）{
删除行
OTab。tbodies { }。removechild（这个父节点的父节点。）；
}；
/ /将创建好的TR为TBODY
OTab。tbodies { }。appendChild（OTR）；
}；
}；
姓名 uff1a
年龄：
工作人员表
身份证件
全名
年龄
操作
白
肖明
红
狼
丽莎

This example only very simple to complete the add and delete, and wrong input to determine if perfect want to do, but also need to do a lot of work, to form landscaping, set the background color, highlighting the mouse, the mouse out to restore the background color, the key is to form input to determine the content, to ensure that every time the information submitted is valid if the table information, a large amount of information, you can also add support fuzzy search, keyword search, in order to improve the user experience, of course, in the actual project, this situation almost does not appear, but can be used as their own practice, testing learning outcomes.

（5）替换节点和创建文本节点

的作用（）方法可以用来取代元素节点。

语法：对node.replacechild第一个参数（新节点，节点）是替换一个节点。二参数是原始的结。

的作用是：（）方法创建一个新文本节点并返回新创建的文本节点。

语法：document.createtextnode（TXT）

这两种方法很少使用，但仍需加以理解。

例如：点击按钮代替跨标签，B标签，然后创建一个文本节点插入下创建的P元素和设置类名。

Javaｓｃｒｉｐｔ实例

P {。
宽度：PX；
高度：PX；
背景颜色：# CCC；
}
创建一个标签，设置ClassName属性，并创建一个文本节点。
函数更改（）{
获取跨度元素
VAR系统= document.getelementbyid（的）；
创建一个B元素
无功节点= document.createelement（B）；
要替换的文本节点
VaR txt = document.createtextnode（'classname）；
将 文本节点插入到B元素中创建
newnode.appendchild（TXT）；
新版本的B元素替换了跨元素中的父/跨元素。
os.parentnode.replacechild（节点，OS）；
}
创建一个p元素
VaR OP = document.createelement（'p'）；
设置 / /类名
op.classname = 'p'；
创建一个文本节点
无功txtnode = document.createtextnode（'createtextnode用于创建文本节点！；
创建并插入到p元素中的文本节点
op.appendchild（txtnode）；
插入到父体内的p元素
document.body.appendchild（OP）；
以上描述是您所共享的Javaｓｃｒｉｐｔ DOM学习摘要（五）的完整描述。希望你能喜欢。