Home > Article > Web Front-end > JavaScript DOM 学习总结(五)_javascript技巧
1、DOM简介。
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构，即节点树。通过DOM，JS可创建动态的HTML，可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式，并对页面中所有事件做出响应。所以学习JS的起点就是处理网页，处理网页就需要使用DOM进行操作。
2、DOM获取元素。
JS要想操作HTML元素，那么首先就必须先找到该元素。通常使用以下几种方法完成：
通过元素设置的id找到HTML元素。
通过标签名找到HTML元素。
通过元素设置的名称(name)找到HTML元素。
所谓的DOM，实际上就是document，获取元素就是操作document。
(1)、通过id找到元素
方法：document.getElementById('id');
网页是由标签将信息组合起来的，id属性值是唯一的，就像身份证一样，通过一个身份证可以找到相对应的人，所以通过该方法，可以获取到与之相对应的标签，而获取的元素在JS中是一个对象，若想对元素进行操作，则需要通过他的属性或方法。
(2)、通过标签名找到元素
方法：document.getElementsByTagName('Tagname');
通过该方法，返回的是带有指定标签名的对象的集合，也就是以数组的形式返回，返回的顺序是他们在文档中的顺序。
(3)、通过name找到元素
方法：document.getElementsByName('name');
该方法与getElementById()方法有点相似，都是通过设置的属性值找到元素，只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一，所以该方法返回的也是元素的数组，而不是一个元素。
既然可以通过id找到元素，那么也就可以通过class找到元素。className属性用于设置或者返回元素的class类名。
语法：object.className = 'className'
该方法可以控制class类名，返回元素的class属性，作用是可以为网页中某个元素指定一个className来更改该元素的外观。
实例：简单的网页换肤效果
网页换肤 点击切换：
这只是一个简单的切换背景色效果，如果想切换网页的整体样式，可以使用外部CSS文件，通过JS改变link标签的href属性来完成。
如果想设置多个class类名相同的元素的样式，就需要借助数组的方法来完成，其实现原理也很简单，首先通过id获取其父元素，再获取父元素下所有子元素的标签名，获取标签名返回的是元素的数组，所以就可以和访问数组一样的方法来访问元素的数组，那么先使用循环遍历该元素数组，再做判断，如果这个元素的className等于我们设置的class属性值，就说明这是我们要找的元素。
实例：将有序列表中所有class属性值为"col"的元素背景颜色设置为绿色。
- 热点
- 美食
- 数码
- 科技
- 社会
- 养生
下面是一个通过class属性值获取元素的封装函数，方便以后使用。
封装getByClass函数
- 热点
- 美食
- 数码
- 科技
- 社会
- 养生
3、DOM操作。
获取到HTML元素之后，就可以进行相应的操作。
(1)、改变HTML
修改HTML内容的最简单的方法时使用 innerHTML 属性。innerHTML顾名思义，inner就是内部的，既然是HTML，那么就可以给里边放HTML。该属性可用于获取和替换HTML元素的内容。
语法：document.getElementById(id).innerHTML = new HTML
原标题
(2)、操作元素属性
修改元素属性最简单的方法就是直接修改，语法：document.getElementById(id).属性名 = new value 比如修改图片src属性的指向路径。
此外还可以通过DOM方法获取、添加、删除元素的属性。
①、getAttribute()
getAttribute()方法通过元素节点的属性名获取属性的值。
语法：elementNode.getAttribute(name) name是想要获取的元素节点的属性名
②、setAttribute()
setAttribute()方法添加一个新属性并指定值，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value) name是属性名，value是属性值。
③、removeAttribute()
removeAttribute()方法可删除元素的属性。
语法：elementNode.removeAttribute(name) name是属性名。
JavaScript实例
(3)、改变CSS
改变HTML元素的CSS样式可直接使用该语法：document.getElementById(id).style.样式名 = new style
JavaScript实例 HTML DOM JS可以使网页添加动态效果并实现与用户交互的功能。 . JS能够改变页面中所有的 HTML 元素。
. JS能够改变页面中所有的 HTML 属性。
. JS能够改变页面中所有的 HTML 元素的CSS样式。
上面的代码，通过style设置的样式，都是行间样式，可以使用火狐的Firebug点击相应的按钮，就能看到所有设置的CSS样式都出现在了行间。
可以直接通过style获取和设置CSS样式，那么有没有更简洁的方法呢？可以借助于函数使用JS的内置对象arguments完成，所谓arguments，就是可变参，不定参，参数的个数可变，是一个参数数组，无需指出参数名，就可访问他们，但是为了增强可读性，给参数取名，还是很有必要的。
JavaScript实例
下面是一个获取和设置行间样式的封装函数，以便以后使用。
获取行间样式
我们都知道，在实际的WEB项目开发中，要遵循结果、表现、行为相分离的原则，以增强可读性，优化代码，便于后期维护。所以通常我们设置元素的样式，并非都是在行间设置。使用style方法获取的只是DOM元素style属性里的样式规则，对于通过class属性设置的外部样式表，style就显得力不从心了。那要如何获取元素的非行间样式呢？DOM标准中有个全局方法getComputedStyle，通过该方法可以获取当前对象的样式信息。比如：getComputedStyle(obj, false).paddingLeft，可以获取到对象的左内边距。这里需要注意：在获取元素的复合样式时，一定要使用精确的值，复合样式比如background、border，如果要获取元素的背景颜色，只使用background会出错，一定要写成backgroundColor。
JS只能修改元素的行间样式，并不能修改获取到的非行间样式。那么很多人可能会产生疑问，既然可以获取到又不能修改，那还获取有什么用。其实获取非行间样式是非常有必要的，如果是外部样式表，样式都是密密麻麻一片英文的存在，不可能一个个去找，到底该元素设置的什么样子，再回头修改，那岂不是太浪费精力了，所以该方法就显得尤为重要，而且返回的值都是精确值，通过获取的非行间样式信息，也有利于更精细的修改元素的当前样式，这是多么美妙的一件事，直接使用style设置元素的行间样式，因为行间样式的优先级最高，所以就覆盖掉了非行间样式，其实也就相当于跟修改了非行间样式一样，只是显示在了行间，我们目的反着是已经达到了。
获取非行间样式
(4)、对事件做出响应
实例：全选和反选，输入对应的序号选中
JavaScript实例
3、DOM节点。
HTML文档可以说是由节点构成的集合，常见的DOM节点有三种，即元素节点、属性节点和文本节点。元素节点就是HTML标签，标签的属性就是属性节点，文本节点就是页面可以浏览的内容。
在文档对象模型中，每一个节点都是一个对象，DOM节点有三个重要的属性：节点的名称，节点的值和节点的类型。
(1)、nodeName：节点的名称
nodeName属性返回节点的名称。元素节点的名称与标签名相同(大写)，属性节点的名称是属性的名称，文本节点的名称永远都是#text，文档节点的名称永远都是#document。
(2)、nodeValue：节点的值
nodeValue属性返回节点的值。元素节点的值是undegined或null，属性节点的值是属性的值，文本节点的值是文本自身。
(3)、nodeType：节点的类型
nodeType属性返回节点的类型。以下是常见的节点类型：
JS中函数可以嵌套使用，有父函数有子函数，HTML标签也可以嵌套使用，那么就说明存在着各种不同的节点关系，比如父节点、子节点和兄弟节点。为了方便操作，DOM定义了一些节点的公共属性。
(1)、子节点
childNodes属性返回节点的子节点集合，可使用length属性返回子节点的数量，然后就可以和数组一样获取需要的信息。
通过上面的代码，可以看到返回的是11。ul下明明只有5个li元素，怎么会返回11呢？其实是这么回事：
因为通过childNodes属性返回的子节点集合，不仅包括元素节点，而且还包括文本节点，浏览会将标签之间的空白默认为文本节点，在空白处输入文字，会在浏览器显示。所以建议使用children属性，该属性只返回元素节点，不包括文本节点，并且不包括注释节点。
上面的代码，ul下5个li元素，返回子节点个数为5。children属性要比childNodes属性好用太多了，只返回元素的子节点，还不包括孙子辈节点。
(2)、首尾子节点
firstElementChild属性返回children数组的第一个节点。
语法：node.firstElementChild 该方法相当于：element.children[0]
lastElementChild属性返回children数组的最后一个节点。
语法：node.lastElementChild 该方法相对于：element.children[element.children.length-1]
空白节点JS
DOMjQuery
(3)、父节点
parentNode属性用于获取指定节点的父节点。注意：父节点只能有一个。通过使用两个获取父节点，可获取祖节点。
实例：点击子节点，隐藏父节点
offsetParent属性可返回一个元素用于定位的父级。
JavaScript实例
(3)、兄弟节点
nextElementSibling属性返回同一树层级中某个节点之后紧跟的节点。
语法：element.nextElementSibling
previousElementSibling属性返回同一树层级中某个节点之前紧跟的节点。
语法：element.previousElementSibling
| 节点类型 | 说明 | 值 |
| 元素节点 | 每一个HTML标签都是一个元素节点，如 、 、
|
1 |
| 属性节点 | 元素节点（HTML标签）的属性，如 id 、class 、name 等。 | 2 |
| 文本节点 | 元素节点或属性节点中的文本内容。 | 3 |
| 注释节点 | 表示文档注释，形式为。 | 8 |
| 文档节点 | 表示整个文档（DOM 树的根节点，即 document ）。 | 9 |
实例：获取li元素节点的兄弟节点
4、DOM应用。
DOM最实际的应用就是可以通过JS创建、插入和删除节点。
(1)、创建节点
createElement()方法可创建元素节点。
语法：document.createElement(tagName)
appendChild()方法可在指定节点的末尾插入一个新的子节点，每次都向末尾添加。
语法：父级.appendChild(new node)
实例：创建并添加li元素
JavaScript实例
(2)、插入节点
insertBefore()方法可在已有的子节点前插入一个新的子节点。
语法：父级.insertBefore(new node, node) 第一个参数为要插入的新子节点。第二个参数是原有节点，也就是在谁之前插入。
实例：创建并添加li元素，每个新创建的li元素都插入到之前插入的li元素之前
JavaScript实例
(4)、删除节点
removeChild()方法用于删除一个节点
语法：父级.removeChild(node) 参数为要删除的子节点。
实例：简单的表格添加和删除
JavaScript实例
姓名：
年龄：
| ID | 姓名 | 年龄 | 操作 |
|---|---|---|---|
| 小白 | |||
| 小明 | |||
| 小红 | |||
| 张三 | |||
| 李四 |
这个实例只能很简单的完成添加和删除，并不对输入进行判断，如果想要做的完美，还需要做很多工作，可以对表格进行美化，设置背景色，鼠标移入高亮显示，鼠标移出恢复背景色，最关键的就是要对表单输入内容进行判断，以确保每次提交的信息都是有效信息，如果表格信息量大，还可以添加支持模糊搜素，多关键字搜索，以提高用户体验度，当然在实际的项目中，这样的情况几乎不会出现，但可以作为自己的实践，检验学习成果。
(5)、替换节点和创建文本节点
replaceChild()方法可用于替换元素节点。
语法：node.replaceChild (new node, node) 第一个参数为用于替换的节点。第二个参数为原有节点。
createTextNode()方法可创建新的文本节点，返回新创建的Text节点。
语法：document.createTextNode(txt)
这两种方法平时几乎用不到，但还是需要了解。
实例：点击按钮将span标签替换为b标签。再创建一个文本节点插入到创建的p元素下，并设置className。
JavaScript实例 创建一个P标签，设置className属性，创建文本节点。
以上所述是脚本之家小编给大家分享的关于JavaScript DOM 学习总结(五)的全部叙述，希望大家喜欢。