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

时间: 2017-11-08阅读: 375标签: 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属性    



Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

js秒数转换成时分秒_js如何将秒拼接为时分秒显示?

接口返回的是int类型的秒数,在前端显示要求拼接为时分秒显示,这篇文章主要讲解实现js秒数转换成时分秒的方法。

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

基于规则评分的密码强度检测算法分析及实现(JavaScript)

用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差。那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

javascript中关键词in用法介绍【js 关键字 in 的使用方法】

js中关键词...in... 从字面上理解就是什么在什么中,在js中差不多也是表达这个意思,主要作用:1用于数组和对象的判断、2 遍历数组或者对象