javascript对dom的操作总汇,js创建,更新,添加,删除DOM的方法

时间: 2017-11-08阅读: 4576标签: js知识

html文档在浏览器解析后,会成为一种树形结构,我们需要改变它的结构,就需要通过js来对dom节点进行操作。dom节点(Node)通常对应的是一个标题,文本,或者html属性,都有一个nodeType来标示他的类型:

值 nodeType名称 
 1  Element  元素
 2  Attribute  属性
 3  Text  文本
nodeType表示Node的类型,它是一个整数,上面列表只显示了3个我们比较常用的,可以通过nodeType来判断节点是什么类型,例如:
<script>
   	console.log(document.getElementsByTagName('meta')[0].nodeType);//输出1,代表页面中第一个meta是元素类型
   </script>


js动态创建Dom

createElement()方法可创建元素节点,此方法可返回一个 Element 对象。例如我们需要在body下创建一个按钮元素button,方法如下:

<script type="text/JavaScript"> 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   document.body.appendChild(input);  
 </script>

Dom的获取

1.直接获取

通过id来获取,由于ID在HTML文档中是唯一的,可以直接定位唯一的一个DOM节点。

var test=document.getElementById('id')

通过节点名来获取,由于文档中存在多个名称,所以返回的是一组节点。

var test= document.getElementsByTagName('div') 

通过类名来获取。

var test= document.getElementsByClassName('class') //返回一组有该类的所有节点。

var test=document.querySelector(".class")//返回当前文档中第一个类名为 " class  " 的节点 ,里面参数也可以用id如#id。

var test= document.querySelectorAll("div.class, div.other")//返回一组文档中div的class为"class"或者 "other"的节点。

注意:IE8及以下版本是不支持querySelector和querySelectorAll的。

2.通过父节点获取子节点

为了精确地选择DOM,我们可以先定位父节点,再从父节点开始选择子节点,以缩小范围。

var ch = test.children;//获取节点test下的所有直属的节点集合

var first = test.firstElementChild; // 获取节点test下第一个节点

var last = test.lastElementChild;//获取节点test下第一个节点

3.通过获取父节点,和兄弟节点

var parent =  test.parentElement;//获取父节点

var next =  test.nextElementSibling; //获取下一个兄弟节点

var pre =  test.previousElementSibling;//上一个兄弟节点

4.注意

平时我们还可能会看到用这些来获取,比如parentNode,childNodes,firstChild,lastChild,nextSibling,previousSibling等,需要注意的是:它们返回元素集合,包括元素节点,属性节点,文本节点。而我们上面主要是获取元素节点。


Dom的修改、删除

ele.appendChild(test); // 添加子元素 

ele.replaceChild(test,  test1);  // 替换子元素 

parent.insertBefore(new, reference);  // 插入子元素 ,意思是在parent的子节点reference前插入new。

ele.cloneNode(true) //克隆元素。该参数为true,代表被复制的节点是否包括原节点的所有属性和子节点

ele.removeChild(test); //删除子元素   

删除子元素需要注意的是:当使用索引来删除的时候,删除前面的,后面的会出现找不到子元素的情况,如下:

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>
<script>
 var parent = document.getElementById('parent');
 parent.removeChild(parent.children[0]);
 parent.removeChild(parent.children[1]); // 浏览器报错,parent.children[1]不是一个有效的节点。
</script>


DOM的更新

1.修改innerHTML和outerHTML属性:
它们不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树。区别在于:outerHTML包含了直身,而innerHTML只更新它里面的所有元素。(注意的是:如果写入的字符串是通过网络拿到了,要注意对字符编码来避免XSS攻击。)
2.修改innerText或textContent:

它们只能修改Dom节点的文本内容,如果里面有标题元素,会被自动编码。它们的区别在于:innerText不返回隐藏元素的文本,而textContent返回所有文本。(注意IE<9不支持textContent)。

3.修改元素的css

DOM节点的style属性对应所有的css,可以直接获取或设置。但是注意的是CSS允许font-size,但它并非JavaScript有效的属性名,所以需改写为驼峰式命名fontSize,例如:

var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
4.元素的属性的修改操作

修改元素的属性也是经常需要的操作。

var a = test.getAttribute('class'); //获取test元素的class属性

a.setAttribute('class', 'clname'); //把class属性值修改为clname

test.hasAttribute('class'); //判断test元素是否存在clas的属性

test.removeAttribute('class'); //移除test中的class属性    



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/66

关闭

WebSocket的原理及WebSocket API的使用,js中如何运用websocket

WebSocket是HTML5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接

js词法作用域和作用域的理解_什么是javascript词法作用域?

JavaScript引擎在代码执行前会对其进行编译:第一步编译阶段,第二步运行阶段。词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变

原生js实现数字三位逗号,分隔。js实现支持逗号分割的货币格式表示法总汇

javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....

js变量引用(指针)

基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中,数据长度是固定的。引用类型:Object存在堆内存中,数据长度是变化的(同时有栈内存中有一个指针指向这个Object的)。

js常见知识点整理总结

一些常用的JavaScript 知识点整理,包括:两个函数是否等价、NaN是什么?它是什么类型?如何检测一个变量是否是NaN?作用域相关问题?js小数计算不准确的bug,js算法/思路相关,js类型强制转换

js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?

归并排序JavaScript实现_关于归并排序思路和代码实现

归并排序:其基本思想是分治策略,先进行划分,然后再进行合并,步骤是: 1.我们以数组[1, 5, 6, 2, 4, 3]举例,归并排序的第一步,将数组一分为2;2.接着将分成的数组继续一分为2,直到长度为1,我们构成如下二叉树(成树 从上往下)

js中“=”,“==”,“===”的使用和深入理解

Js支持“=”、“==”和“===”的运算符,我们需要理解这些 运算符的区别 ,并在开发中小心使用。它们分别含义是:= 为对象赋值 ,== 表示两个对象toString值相等,=== 表示两个对象类型相同且值相等

js dom是什么?_JS中的DOM知识概览

JS中的DOM知识概览:文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。 web 浏览器浏览一个页面的时候,DOM 就在幕后把你编辑的网页文档转换成一个文档对象。

Performance_js中计算网站性能监控利器

Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况。Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据,包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!