首先 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. 【AS3 Coder】任务四：噪音的魅力（中）

    如果把Math.random方法作为一个生成随机数字的办法,那么bitmapData.perlinNoise就是一个生成随机颜色的办法.在这一部分的对于噪声的应用介绍文章中我们一起来看看使用柏林噪声的 ...

  2. IDEA Maven 下载jar

    转载地址:https://www.cnblogs.com/hongwz/p/5456578.html 本文主要介绍通过配置Maven来下载需要用的jar包. 比如我现在用到把字符串转成json对象,这 ...

  3. android源代码下载备注

    android源代码下载的參考网上比較多,就不贴上来了,主要是备注下下载源代码过程中须要注意的地方. 1. google官方下载步骤地址: http://source.android.com/sour ...

  4. 安装Python的机器学习包Sklearn 出错解决方法

    1 首先须要安装Cython.网上下载后进行本地安装 python setup.py install 2 下载Sklearn包,https://pypi.python.org/pypi/scikit- ...

  5. 进程资源和进程状态 TASK_RUNNING TASK_INTERRUPTIBLE TASK_UNINTERRUPTIBLE

    摘要:本文主要介绍进程资源和进程状态.进程资源由两部分组成:内核空间进程资源以及用户空间进程资源.进程状态,就绪/执行状态.等待状态(能够被中断打断).等待状态(不能够被中断打断).停止状态和僵死状态 ...

  6. Linux经常使用命令(十五) - which

    我们常常在linux要查找某个文件,但不知道放在哪里了.能够使用以下的一些命令来搜索: which  查看可运行文件的位置. whereis 查看文件的位置. locate   配合数据库查看文件位置 ...

  7. Spark学习(一) 基本操作

    先来一个简单的spark小程序,这是官网上的小样例,目的就是统计spark以下的README文档中包括字母a和字母b的个数,然后 打印,代码例如以下: object BasicStandaloneAp ...

  8. CentOS系统时间与网络同步

    新装的CentOS系统server可能设置了错误的,须要调整时区并调整时间.例如以下是CentOS系统使用NTP来从一个时间server同步: 第一步: 把当前时区调整为上海就是+8区,想改其它时区也 ...

  9. Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle

    Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3.  ...

  10. VS项目名称修改

    阅读数:11141 VS中新建一个项目,如果开发工作都接近尾声,客户来要求更换项目的名称,差不多要变更整个解决方案中项目名称,引用等等,这个工作量还是很大的.上网搜索解决方法,还实验了专门的修改项目名 ...