JavaScript之DOM的增删改查

JavaScript的组成:

1. ECMAScript-语法规范

2. Web APIs(浏览器提供的工具)

(1).BOM (浏览器对象模型)

(2).DOM (文档对象模型)

今天就来讲讲DOM的增删改查 (废话不多说上代码)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7   <title>Document</title>
 8 </head>
 9 
10 <body>
11   <div class="app">
12     <div class="title">123</div>
13   </div>
14   <script>
15     /*  
16         获取节点的方式
17         1.  document.getElementById()  //根据节点的id值来获取该节点
18         2.  document.getElementByTagName()  //根据节点的标签来获取该节点
19         3.  document.getElementByName()   //根据节点的属性值来获取该节点
20         4.  document.getElementByClassName()  //根据节点的类名来获取该节点
21         5.  document.querySelectorAll()   //根据元素标签获取节点  考虑兼容
22     */
23     var app = document.getElementsByClassName("app")[0]
24     /*
25       从一个中心节点访问其所有直系或亲属节点
26       1,访问父节点   parentNode
27       2,访问上一个兄弟节点   previousSibling
28       3,访问下一个兄弟节点   nextSibling
29       4,访问该节点的第一个属性节点   attributes[1]
30       5,访问最后一个子节点   lastChild 或 childNodes[childNodes.length-1]
31     32   //---------------------------------------------------------------------------
33     34       获取属性
35         getAttribute("属性名")  //返回属性值
36         getAttributeNode("属性名")  //返回属性节点
37     38   39     40       创建 (常用)
41       document.createElement()  //创建元素节点
42       document.createTextNode()  //创建文本节点
43       document.createAttribute()  //创建属性节点
44       innerHTML
45       innerText
46       cloneNode()       //克隆
47     48   49     50       加入
51       appendChild()       //追加到尾出
52       insertBefore()      //将元素插入到某一元素的前面
53       用法: 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素)
54     55   56     57       删除
58       removeChild //删除子元素
59       removeAttributeNode  //删除属性节点
60     61   62     63       修改节点
64         删除再加入
65       修改样式
66         style.***=***
67         setAttribute("style","****")
68       修改文本
69         .innerHTML
70         .innerText
71         节点操作
72         .nodeValue
73       修改属性
74         .属性名=属性值
75         .setAttribute("属性名","属性值")
76     77   78     79       其余常用的操作
80       style //修改css样式
81       setAttribute("属性名","属性值")  // 设置属性
82     83   </script>
84 </body>
85 
86 </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)