JavaScript 实现HTML DOM增删改查操作的常见方法详解
本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法。分享给大家供大家参考，具体如下：
首先 js 可以修改HTML中的所有元素和属性，它还可以改变CSS样式，并且可以监听到所有事件并作出响应，这篇笔记呢 主要记录如何对HTML元素进行增删改查。
1 查找DOM
第一种方式是我们最常用的：通过ID查找：
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<p id="demo">你能找到我么？</p>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
document.getElementById("demo").innerHTML = "ok";
}
</script>
</html>
注意：当我们写HTML的时候尽量保证ID不重复。
第二种方法：通过标签名查找
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<div id="demo">
<p>hi man</p>
</div>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
var element = document.getElementById("demo");
var p = element.getElementsByTagName("p");
p[0].innerHTML = "yo";
}
</script>
</html>
↑ 我们取到了ID为demo的div，然后在div中有个p元素 没有ID属性，我们就可以通过tagname来找到它。
第三种方法：通过class来查找
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<div class="demo">
<p>hi man</p>
</div>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
var element = document.getElementsByClassName("demo")[0];
var p = element.getElementsByTagName("p");
p[0].innerHTML = "yo";
}
</script>
</html>
2 删除DOM
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<div id="div1">
<p id="p1">hi man</p>
<p id="p2">hello</p>
</div>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
var div1 = document.getElementById("div1");
var p2 = document.getElementById("p2");
div1.removeChild(p2);
}
</script>
</html>
3 新增DOM
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<div id="div1">
<p id="p1">hi man</p>
<p id="p2">hello</p>
</div>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
// 创建P标签
var p = document.createElement("p");
// 创建文本节点
var node = document.createTextNode("新的P标签");
// 创建属性
var attr = document.createAttribute("class");
attr.value = "class p";
// p标签中添加文本节点
p.appendChild(node);
// p标签中添加属性
p.setAttributeNode(attr);
var div = document.getElementById("div1");
// 添加p标签
div.appendChild(p);
}
</script>
</html>
4 修改DOM
4.1 修改DOM的内容
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<div id="div1">
<p id="p1">hi man</p>
<p id="p2">hello</p>
</div>
<button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
function changeText(){
var element = document.getElementById("p1");
element.innerHTML = "更改内容";
}
</script>
</html>
4.2 修改DOM的属性
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<a href="https://www.baidu.com" rel="external nofollow" id="link">链接</a>
</body>
{{--js--}}
<script>
var element = document.getElementById("link");
element.href = "https://www.google.com";
</script>
</html>
4.3 修改DOM的CSS样式
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
</head>
<body>
<p id="p1">文本</p>
</body>
{{--js--}}
<script>
var element = document.getElementById("p1");
element.style.color = "red";
</script>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript 获取HTML DOM父、子、临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
-
JavaScript DOM元素常见操作详解【添加、删除、修改等】
本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
-
通过JS动态创建一个html DOM元素并显示
近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个
-
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属
-
JS中使用DOM来控制HTML元素
1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=docume
-
使用js dom和jquery分别实现简单增删改
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con
-
JavaScript操作HTML DOM节点的基础教程
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取.创建.修改.或删除节点. NOTE:下面提供的例子中的 element 均为元素节点. 获取节点 父子关系 element.parentNode element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousElem
-
JavaScript中对DOM节点的访问、创建、修改、删除
DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
-
Js 获取HTML DOM节点元素的方法小结
如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如今,已经出现了如proto
-
详解JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE
-
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C
-
JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <scr