JavaScript DOM操作，就是这么简单！

DOM，即文档对象模型（Document Object Model），是通过JavaScript来对HTML文档进行管理和操作的一类对象模型，通过DOM可以操作HTML的元素和元素的属性，包括对元素的增删改等操作。

首先需要了解DOM的理论，DOM是将一系列HTML元素看做对象进行管理的操作方法，每个HTML的元素节点都是一个可调用的对象，通过对象的方法可以对元素进行操作。DOM是树形结构的模型，最顶级的节点是文档节点，即document对象，他可以理解为整个HTML文档，或者是

标签，然后在标签中有许多子元素，包括body和head都是html的子元素，接下来body是网页的主体部分，在这里又有很多的子元素，这些子元素又有很多属性，所有的这些节点和属性都可以被看做是对象。

DOM模型图示：

由图可知：文档是整个树的根，其中的根元素是标签，对应的JavaScript对象是document，往下一级元素是head和Body，这两个元素定义了文档的头部和主体，在头部中的title标签定义了文档的标题，这个标题有一个特殊点就是，虽然他是head的子元素，但是他可以在document对象中直接调用。

例如;

document.title="DOM测试";

这段代码就会改变整个文档的标题，因为title可看做是document对象的一个属性，调用这个属性并重新赋值就可以改变title的内容。

注意，虽然title是html下的一个子标签，但是他不作为节点，他是文档的属性（标题），所以通过document对象可以直接修改他的值。

我们也可以通过document对象直接操作body的内容，例如：

document.body.style.color="red";

这样会修改body内也就是整个页面的文字颜色为红色。

因为在document对象中直接包含了body作为子对象，且style是body标签属性，实际上在DOM中，style是用作对css进行操作的，这里我们暂时理解为标签属性，他是body的子对象，因此他可以包含一些属性和方法，显然，color就是style的对象属性。

简单来说，document是一个对象，body是一个对象，且是document的子对象，style又是body的子对象，而style不是标签，就没有子对象，color只能作为对象的属性了。

同理，修改body下的字体大小：

document.body.style.fontSize="20px";

值得注意的是，JavaScript的类属性和方法采用严格的小驼峰法命名，并且不能使用连字符作为命名，所以在CSS中对应的font-size属性在DOM中应该写为：fontSize.

同理，border-radius应该写作borderRadius。

我们是否可以这样做：

document.body.p.style.color="red";

绝对不可以！这样做会产生错误！因为DOM是树形展开的，并且只有属性能作为标签的子对象，在任何一个标签的对象下，都只包含这个标签的属性和一些DOM自带的属性、方法，子对象只能通过选择的方式获取对象。

如何对body下的标签进行管理呢？

需要使用document对象中的方法来完成操作：

1.getElementById()方法：

getElementById()方法是通过元素的id来获取元素对象，因为id在HTML文档中原则上是唯一的，所以它一次只会获取一个元素。然后返回的内容就是这个id的元素的对象。

例如：

HTML:

<p id="test">这是一段测试文本</p>

JS:

document.getElementById("test").inneHTML="但是他的文字被修改了";

innerHTML是元素对象下的一个属性，代表标签内的内容。通过getElementById()方法获取id为test的元素的对象，然后修改innerHTML属性即修改元素内容。也可以通过这种方式向元素内添加新元素：

document.getElementById("test").inneHTML="<a href='../'>这是一个链接</a>";

但是通常情况下我们不选择这么做，因为这样代码美观性不足，并且不适合完成复杂的添加节点操作，所以我们一般采用createElement()的方式，会在下文中叙述。

2.getElementsByName()方法：

getELementsByName()是通过HTML标签的name属性来查找HTML元素，所以方法名式Elements而不是Element，因为HTML允许多个标签是同一个name属性。此方法返回的是一组对象组成的数组。

而我们在对通过此方法获得的节点进行操作时，必须选中指定的元素才能访问DOM提供的方法和属性，因为他返回的不是某个节点的对象，而是所有符合条件的对象组成的数组，通常情况下，我们如果想要对所有的这些节点进行修改，会使用for循环来完成。

注意：即使只有一个节点的name属性与选择的内容相同，返回的仍然是节点组成的数组，通过指定数组下标才能选取对应的节点。同时对于新手可能还会有一个误区，通过typeof判断返回的数据类型是 Object，这不是对象吗？千万别忘了！JavaScript的数据类型比较特殊，所有的引用类型都是对象！Array

HTML：

<input type="checkbox" name="hobby" value="basketball">basketball
<input type="checkbox" name="hobby" value="baseball">baseball
<input type="checkbox" name="hobby" value="ping-pong">ping-pong

JavaScript：

list=document.getElementsByName("hobby"); //获取已选的复选框
for(i=0;i<=list.length;i++){
if(list[i].checked==true){ document.write("兴趣爱好是："+list[i].value); }
}

以上代码是是简单的验证已选的复选框的内容，上面已经提到，每个HTML标签的属性都会被作为属性存在标签的对象中，所以在我们选中节点（标签对象）时，就可以直接通过访问节点属性访问标签的内容。如上，list[i]就是遍历的每个复选框的节点对象。通过访问属性就可以得到对应的标签属性，list[i].checked就是复选框的check属性，如果复选框被勾选就是true如果没有被勾选就是false。

document.write()是在文档中写入内容的方法。

3.getElementsByClassName()方法：

getElementsByClassName()是通过HTML元素的类名获取节点，返回的同样是一组有序的对象的组成的数组，与getElementsByName用法相同。

例：修改所有类名为women的元素字体颜色为红色。

HTML:

<div>
<p class="women">小芳</p>
<p class="man">小刘</p>
<p class="women">小樱</p>
</div>

JavaScript：

list=document.getElementsByClassName("women");
for(i=0;i<=list.length;i++){
list[i].style.color="red";
}

效果：

3.getElementsByTagName()方法：

getElementsByTagName()即通过标签名选中节点，与上面两个方法一样，就不演示了。 4.createElement()方法：

createElement()方法是document对象的直属子方法，并且只有document对象可以使用此方法，别的节点对象没有此方法。此方法的用处是创建一个节点对象，但是这个对象不会直接写入文档，而是在内存中，需要通过appendChild()方法来将此节点添加到某个元素中，参数值是要创建的节点名即HTML标签名。

例：在body中插入一个div元素，并且在div中插入一个无序列表，然后将列表标记删除。

divnode=document.createElement("div");
ulnode=document.createElement("ul");
for(i=0;i<=3;i++){
linode=document.createElement("li");
linode.innerHTML="项目"+i;
ulnode.appendChild(linode);
}
ulnode.style.listStyleType="none";
divnode.appendChild(ulnode);
document.body.appendChild(divnode);

效果：

appendChild()方法：

appendChild()方法即在某个元素的节点下插入子元素，方法的参数是一个节点的对象，一般配合createElement()方法使用。

appendChild()方法可以用于节点对象下，如果用于document下，会产生一个错误：only one element on document allowed.

例：向表单中新增一个备注框。

HTML:

<form method="POST" id="form">
<input type="text" name="name" placeholder="姓名">
<input type="text" name="phone" placeholder="手机号">
<input type="text" name="code" placeholder="编号">
</form>

Javascript:

form=document.getElementById("form");
input=document.createElement("input");
input.type="text"; input.name="beizhu";
input.placeholder="备注";
form.appendChild(input);

效果：

能否选中一个元素，然后将他的内容添加到另一个元素中，比如：

var a=document.getElementById("a");
var div=document.getElementById("div");
div.appendChild("a"");

这样做的话，原来的id为a的元素会消失，会被移动到id为div的元素下，所以我们可以通过这种方法移动元素。因为每个元素对应的都是一个唯一的对象，获取的这个对象就是这个元素的整个标签内容，这个对象中也包含元素的节点位置，因此，将通过js选中的元素添加的另一个元素的子对象，会将唯一的元素添加到另一元素的对象中。

cloneNode()方法：

既然通过选中元素直接添加子元素的方法无法复制元素，JS自然会给出复制元素的方法，也就是cloneNode方法，cloneNode方法只会克隆节点以及节点的属性，而不会改变文档树。

该方法有一个参数，表示是否复制该节点下的子节点。参数类型是bool，如果是true则连同元素下的子节点一同复制，如果是false则只复制当前节点。

例：

HTML:

<p>是一个段落<a color="blue" href="../">这是一个超链接</a>
</p>
<div id="t">
</div>

JS:

div=document.getElementById("t");
p=document.getElementsByTagName("p");
pnode=p[0].cloneNode(0)
div.appendChild(pnode);

运行一下这段代码，发现没有任何反应？因为这时候参数为0，也就是false，这时方法只会克隆节点，而不会克隆节点内容，如果我们打印一下pnode，发现他的值是

<p></p>

查看源代码，div元素中多了一个子元素P，但是没有内容。

为什么p里面的字也没有被克隆呢？实际上，节点中的内容也可被认为是子元素，p中的文字是一个文字节点，他自然不能是与p同级的节点，所以不会被克隆，我们也可以对已选中节点新增文字节点。

上面的例子，只要将cloneNode的0改为1就可以将节点内容和子元素复制下来。接下来测试文本节点方法。

createTextNode()方法

createTextNode()方法即创建一个文本节点，他是document对象下的方法，返回一个文本节点对象。

例：

p=document.getElementsByTagName("p")
text=document.createTextNode("测试文本")
p[0].appendChild(text); //为第一个p元素添加测试文本。

以上是常用的DOM方法，然而这只是冰山一角，DOM提供了非常多的document属性方法和元素的属性和方法，关于这些更多的方法和属性，会另起篇幅详述。

JavaScript DOM操作，就是这么简单！相关推荐

javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
视频教程-Javascript DOM操作-JavaScript
Javascript DOM操作江湖花名King... 何山 ¥39.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ↓↓↓ ...
java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率不支持事 ...
JavaScript DOM操作Select下拉框
DOM操作Select下拉框: 获取select选中的option值,修改选中的选项,添加选项option. <body> <script type="text/javas ...
JavaScript DOM操作为什么会影响性能
DOM操作影响性能的原因主要有以下两点: 在浏览器中,DOM的实现和ECMAScript的实现是分离的.比如在Chrome中使用WebKit中的WebCore处理DOM和渲染,但ECMAScript是 ...
常见的原生javascript DOM操作
1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
【收藏】JavaScript DOM操作简易速查手册
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧极客侠栈即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
JavaScript DOM操作表格及样式
一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
2.Javascript(DOM操作，数据类型补充，函数补充，选择分支补充
目录一.补充 1.数据类型转换 2.运算符补充 3.函数创建.作用域.声明.按值传递 4.预定义全局函数 5.补充分支循环 6.数组补充二.API方法,二维数组,String字符串 1.数组API ...

JavaScript DOM操作，就是这么简单！

JavaScript DOM操作，就是这么简单！相关推荐

最新文章

热门文章