| 一、前言 |
DOM 是 W3C（World Wide Web Consortium）标准。同时也 定义了访问诸如 XML 和 HTML 文档的标准：
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
在HTML和JavaScript的学习中，DOM操作可谓时重中之重。今天，小编就领着大家来看看DOM操作是个什么样子！！
| 二、DOM节点 |
DOM节点分为三大类：元素节点、属性节点、文本节点；
而我们心心念念想知道的DOM树就长酱紫！
由DOM树我们可以看到，文本节点、属性节点属于元素节点的子节点。
文本节点和属性节点就像是这颗DOM树的果子，而元素节点就是树枝，所以，在操作时，一定要要记顺枝摘果：得先取到元素节点！然后再操作子节点！！
要先取到元素节点！要先取到元素节点！要先取到元素节点！重要的事情说三遍！
到这你就该好奇了，那该怎么顺着树枝摘果子呢，别急，小编给你带来了方法!
2.1先找树枝——获取元素节点
首先，可以用使用getElement系列方法，取到元素节点。
下面列出一些常用的 DOM 对象方法:
在这里，小编该介绍怎么找树枝了！
小编先示范一遍，注意看了！
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.div{ ???????????????width: 100px; ???????????????height: 100px; ???????????} ???????</style> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????var btn1 = document.getElementById("btn1"); ???????????????console.log(btn1); ???????????????var is = 0; ???????????????btn1.onclick =function ?(){ ???????????????????????????????????????is++; ???????????????????if(is%2!=0){ ???????????????????????var div = document.getElementsByClassName("div"); ???????????????????????div[0].style = "background-color:red;color:yellow;"// ???????????????????????div[0].innerText = "hehe"; ???????????????????????div[0].innerHTML = "<h2>hehe</h2>"; ???????????????????}else { ???????????????????????var div = document.getElementsByClassName("div"); ???????????????????????div[0].style = "background-color:blue;color:white;" ???????????????????????div[0].innerHTML = "<h2>hahaha</h2>"; ???????????????????} ???????????????????????????????????} ???????????????????????????} ???????????</script> ???</head> ???<body> ???????????<button id = "btn1" class = "btn" onclick="but()">这是一个按钮1</button> ???????<div class="div">hahaha</div> ???????????</body></html>
下面，小编开始一步步教学了！
getElementById:通过id取到唯一节点。如果id重名，只能取到第一个。
var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn1");
console.log(btn1);console.log(btn2);小编在上面的代码中新建了一个按钮，ID同样为“btn1”；分别通过getElementById取得了两个的元素节点，并在控制台打印；得到的结果：
getElementsByName() ：通过name属性
getElementsByTagName() ：通过标签名；
getElementsByClassName() ：通过class名；
上面的通过name属性、标签名和class名小编就不多说了，直接看一下怎么使用吧：
var btn1 = document.getElementById("btn1");var className = document.getElementsByClassName("btn");var tagName = document.getElementsByTagName("button");var name = document.getElementsByName("btn");console.log(btn)console.log(className)console.log(tagName);console.log(name);
小编提示：
>>>获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成后执行。
可以有两种方式实现：①将JS代码写在body之后；②将代码写到window.onload函数之中；
>>>后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操作。
例如：
getElementsByName("name1")[0].onclick = function;2.2找到树枝摘果子——查看设置属性节点
接下来，小编就要介绍一下怎么摘果子了！激不激动！
首先，还记得小编提醒了三遍的事情吗？
查看和设置属性节点，必须先取到元素节点，才能使用；
1、查看属性节点：getAttribute("属性名")；
2、设置属性节点：setAttribute("属性名","新属性值");
var btn1 = document.getElementById("btn1"); ???????????var classes = btn1.getAttribute("class“）； btn1.setAttribute("class","btn1");console.log(classes);小编提示：
>>>setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE 中不支持试用这个函数设置style/onclick
等样式属性和事件属性。
>>>我们推荐使用符号法替代上述函数：
eg:dom1.style.color="" dom1.onclick="" dom1.src=""
【总结-js修改DOM节点的样式】
1、使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡；
div.setAttribute("class","cls1");
2、使用.className直接设置class类，注意是className而不是.class:
div.className = "cls1";
3、使用.style设置单个属性，注意属性名要用驼峰命名法：
div.style.backgroundColor = "red";
4、使用.style或.style.cssText设置多个样式属性：
div.style = "background-color:red;color:yellow;"
div.style = "background - color:red;color:yellow" √
3和4小编就不详细介绍了，大家可以袭击去试试！
2.3查看设置文本节点
1、.innerText:取到或设置节点里面的文字内容;
.innerHTML:取到或设置节点里面的HTML代码；
.tagName:取到当前结点的标签名。标签名全部大写
var div = document.getElementsByClassName("div");div[0].style = "background-color:red;color:yellow;"// ???div[0].innerText = "hehe";div[0].innerHTML = "<h2>hehe</h2>";
编者按
小编是个新手，明白前端的学习没有捷径，这次小编就先讲到这，下次继续讲解DOM操作，谢谢大家！！
js中的DOM操作（一）——查看及设置节点
原文地址：http://www.cnblogs.com/zxt-17862802783/p/7498790.html