首先 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" 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>

JavaScript HTML DOM增删改查的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. 用 JS（JavaScript ）实现增删改查

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...

  3. javascript相关的增删改查以及this的理解

    前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...

  4. JavaScript数组：增删改查、排序等

    直接上代码 // 数组应用 var peoples = ["Jack","Tom","William","Tod",&q ...

  5. JavaScript之DOM的增删改查

    JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...

  6. JavaScript（JS）之Javascript对象DOM之增删改查（四）

    创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...

  7. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. HTML DOM(二)：节点的增删改查

    上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...

  9. 超详细的DOM操作（增删改查）

    操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...

随机推荐

  1. 【自动部署】服务器自动化操作 RunDeck

    RunDeck 是用 Java/Grails 写的开源工具,帮助用户在数据中心或者云环境中自动化各种操作和流程.通过命令行或者web界面,用户可以对任意数量的服务器进行操作,大大降低了对服务器自动化的 ...

  2. mac中yeoman构建你的项目

    一开始用在mac中构建一个项目就遇到一个很奇怪的事, 做好各种准备工作后,我开始创建一个angular01作为测试目录,结果运行yo脚手架之后,选择angular工作流进行构建项目,出来的结果我开始慌 ...

  3. 【POJ 1080】 Human Gene Functions

    [POJ 1080] Human Gene Functions 相似于最长公共子序列的做法 dp[i][j]表示 str1[i]相应str2[j]时的最大得分 转移方程为 dp[i][j]=max(d ...

  4. 檢查php文件中是否含有bom的php文件

    原文链接: http://www.cnblogs.com/Athrun/archive/2010/05/27/1745464.html 另一篇文章:<关于bom.php>,http://h ...

  5. 关于Spring管理的类如何创建对象

    今天项目中出现了空指针错误,其实一看这个错误我就知道是哪里错了.而且以前也总是说,没有真正的改过啊.今天把改进方法和大家共享.现在我们的项目中,大多数我们的管理方式都是交由Spring去管理,至于好处 ...

  6. css学习之overlay

    CSS Overlay技巧 作者:大漠 日期:2013-11-10 点击:8  本文由大漠根据SARA SOUEIDAN的<CSS OVERLAY TECHNIQUES>所译,整个译文带 ...

  7. Mysql命令行备份与还原数据库操作实例

    无论是Windows还是Linux,都可以通过如下命令行形式备份Mysql数据库 备份命令: 在windows的DOS窗口命令行或linux的shell命令行,假设需要备份的数据库是advanced: ...

  8. postman --发送json请求

    转自: http://blog.csdn.net/wangjun5159/article/details/47781301 简介: postman是一个很好的http模拟器,在测试rest服务时是很好 ...

  9. Predix中模型设计

    GE的Predix使用了图形数据库作为Asset存储,用以解决传统RDBMS系统中扩展性差,不支持行的动态定义问题. 对于实体,或者Asset来说,由如下几个方面表述: ID: Ties everyt ...

  10. Atitit. 包厢记时系统 的说明，教程，维护，故障排查手册v2 pb25.doc

    Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc 1. 服务器方面的维护1 1.1. 默认情况下,已经在系统的启动目录下增加了 个启动项目1 1.2. 后台服务.保 ...