操作JS中DOM节点有哪些方法

~
这次给大家带来操作JS中DOM节点有哪些方法，操作JS中DOM节点的注意事项有哪些，下面就是实战案例，一起来看一下。
DOM操作在JS中可以说是非常常见了吧，很多网页的小功能的实现，比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢？今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧！！
一、DOM树的节点
1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
属性节点和文本节点都属于元素节点的子节点。 因此操作时，需先选中元素节点，再修改属性和文本。
【查看元素节点】
1、 使用getElement系列方法：
具体的HTML代码如下图：
//通过ID来查看元素属性
var li = document.getElementById("first");
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");注意事项：
① ID不能重名，如果ID重复，只能取到第一个。
② 获取元素节点时，必须等到DOM树加载完成后才能获取。
两种处理方式：
a.将JS写在文档最后；
b.将代码写入window.onload函数中；
③ 通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
document.getElementsByTagName("li")[0].click = function(){}④ 这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点中，选择需要的节点：
document.getElementById("p1").getElementsByTagName("li");【通过querySelector系列方法】
① 传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
var dq1 = document.querySelector("#id");② 传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。这种方法比较全能，不管什么属性都可以准确地找到。
var dqs1 = document.querySelectorAll("#p1 li");【查看\设置属性节点】
1、 查看属性节点：.getAttribute("属性名");
2、 设置属性节点：.setAttribute("属性名","属性值");
注意事项：.setAttribute() 在老版本IE中会存在兼容性问题，可以使用.符号代替。
【JS修改CSS的多种方式】
1、 使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");2、使用.className添加一个class选择器。
document.getElementById("first").className = "class1";3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";4、 使用.style 或 .style.cssText 添加一串行级样式：
// IE不兼容
document.getElementById("first").style = "color:red;";
//所有浏览器兼容
document.getElementById("first").style.cssText = "color:red;";【查看/设置文本节点】
1、.innerHTML: 取到或设置一个节点中的HTML代码。
2、.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。
二、层次节点操作
1. .childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
.children： 获取当前节点的所有元素子节点（不包含文本节点）。
2. .parentNode: 获取当前节点的父节点。
3. .firstChild： 获取第一个子节点，包括回车等文本节点；
.firstElementChild： 获取第一个元素节点。 不含文本节点；
.lastChild： 获取最后一个子节点，包括回车等文本节点；
.lastElementChild： 获取最后一个子节点，不含文本节点；
4. .previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
.previousElementSibling： 获取当前节点的前一个元素兄弟节点；
.nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；
.nextElementSibling：获取当前节点的后一个元素兄弟节点；
5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
【创建并新增节点】
1. document.createElement("标签名")： 创建一个新节点，并将创建的新节点返回。
需要配合.setAttribute()为新节点设置属性。
2. 父节点.insertBefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前。
父节点.appendChild(新节点)： 在父节点的内部最后，插入一个新节点。
3. 源节点.cloneNode(true)： 克隆一个节点。
传入true表示克隆源节点以及源节点的所有子节点；
传入false或不传，表示只克隆当前节点，而不克隆子节点。
【删除、替换节点】
1. 父节点.removeChild(子节点)： 从父节点中，删除指定子节点。
2. 父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
nodejs日志模块winston使用方法总结

jQuery做出循环时间自动更换样式功能

如何根据HTML标签的id属性和标签名称来获取节点
答：输入js代码：var a = '通过id获取：' + $('#test').html();var b = '通过标签名获取：' + $('div').html();('body').append('' + a);('body').append('' + b);3、浏览器运行index.html页面，此时成功通过id和标签名称获取到了节点并打印了节点内容。

js 如何减少dom访问
答：2.虚拟结点 当我们需要对DOM做出大量修改时，可以先创建一个虚拟结点，将所有修改附加在该节点，最后将该虚拟节点一次性提交给在render tree上存在的结点，则相当于只提交了一次修改操作。3.查找元素的优化 因为ID是唯一的，也有原始的方法，因此使用ID查找元素是最快的，其次的是根据类和类型查找元素，...

jquery如何删除节点jquery删除节点的方法
答：希望这篇文章对大家的jQuery编程有所帮助。jquery获取当前同级节点？("a").click(function(){ //获取当前a的前一个同级元素:$(this).prev(),在你提供的代码中,即为img元素 });js怎么删除页面某一内容？js中的话没有remove()方法吧，这是jquery中的方法；要在js中删除元素的话，需要根据元素获取...

js 如何获取新的和旧的dom树?
答：注意此对象保存的只是引用，你做变更，之前保存的对象也是变的，因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象，也就是所谓的深拷贝对象，这个是有点复杂度的，节点如果复杂的话，容易出现问题，要注意处理。3、希望对你有帮助。

如何用JS操作iFrame里的Dom
答：主页面 var myframe=document.getElementById("myframe"); myframe.src=this.location.href;// 设置iframe的页面为当前页面 function invokemyframe(){ myframe.contentDocument.getElementById("myDiv").innerText+="\r\n--修改了--" } setTimeout(invokemyframe,200);// 收尾延迟下，...

js里面的父节点作用
答：一般来说，每个元素都有一个父节点，有0到多个子节点。而Javascript中，修改一个DOM节点的外观，是通过修改这个DOM节点对象的属性来实现的。例如：var div2 = document.getElementById('id2'); // 取id=id2这个节点 var div1 = div2.parentNode; // div2的父节点，也就是id1这个div节点。div...

怎样往jsdom节点里添加字符串
答：首先要获取节点的对象，然后进行操作。假设我们有一个节点：我根据上面的节点做一下举例说明：原生JS：document.querySelector('#name').innerHTML = '我是被添加的内容';jQuery：('#name').html('我是被添加的内容');两种方法运行结果是一样的，如下图：

js中如何判断一个DOM对象是否存在?
答：8、根据javascript的语言设计，undefined == null，所以比较myObj是否等于null，也能得到正确结果 if (myObj == null) { var myObj = { };} 不过，虽然运行结果正确，但是从语义上看，这种判断方法是错的，应该避免。因为null指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined...

什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
答：当你在一次操作时，需要更新10个 DOM 节点，浏览器没这么智能，收到第一个更新 DOM 请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程 而通过 VNode ，同样更新10个 DOM 节点，虚拟 DOM 不会立即操作 DOM ，而是将这10次更新的 diff 内容保存到本地的一个 js 对象中，...

vue中虚拟节点原理
答：vue中虚拟节点原理 https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js 待办项： 1）截取虚拟dom的方法出来，以及下面的四种diff replace: 替换整个节点，某个节点值不一样 text：只是更新文本 reorder：移动／增加／删除 子节点 props：节点的属性变了 浏览器渲染引擎...