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" 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增删改查的更多相关文章

javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
用 JS（JavaScript ）实现增删改查
JS小例题学习内容: 需求总结: 学习内容: 需求用 JavaScript 实现简单增删改查实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...
javascript相关的增删改查以及this的理解
前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...
JavaScript数组：增删改查、排序等
直接上代码 // 数组应用 var peoples = ["Jack","Tom","William","Tod",&q ...
JavaScript之DOM的增删改查
JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...
JavaScript（JS）之Javascript对象DOM之增删改查（四）
创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...
DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
超详细的DOM操作（增删改查）
操作DOM的核心就是增删改查原文地址:https://jianshu.com/p/b0aa846f4dcc 目录一.节点创建型API 1.1 createElement 1.2 createTex ...

随机推荐

webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
Spark（二） -- Spark简单介绍
spark是什么? spark开源的类Hadoop MapReduce的通用的并行计算框架 spark基于map reduce算法实现的分布式计算拥有Hadoop MapReduce所具有的优点但 ...
二分求幂 - A^B（王道*）
题目描述: 求A^B的最后三位数表示的整数,说明:A^B的含义是“A的B次方” 输入: 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果 ...
基础普及-Jar、War、Ear
名词解释 Jar文件(扩展名为. Jar) 包括Java类的普通库.资源(resources).辅助文件 (auxiliary files)等 War文件(扩展名为.War) 包括所有Web应用程序. ...
mysql增量备份(2/2)
前言这是在百度文库里看到的文章,原名叫做<MYSQL 完全与增量备份及恢复文档 >,是关于完全备份和增量备份以及恢复文档的...... 文档介绍本文档采用 mysqldump 对数据 ...
pcap学习
#include <pcap.h> char errbuf[PCAP_ERRBUF_SIZE]; pcap_t *pcap_open_live(const char *device, in ...
Nginx主动连接与被动连接的差别
1.主动连接是指Nginx主动发起的同上游server的连接:被动连接是指Nginx接收到的来自client主动发起的连接; 2.主动连接用ngx_peer_connection_t结构体表示:被动连 ...
ubuntu 环境变量PATH的修改
sudo nano /etc/environment 环境变量是和Shell紧密相关的,用户登录系统后就启动了一个Shell.对于Linux来说一般是bash,但也可以重新设定或切换到其它的 She ...
stm32 IDR寄存器软件仿真的BUG
/* * 函数名:Key_GPIO_Config * 描述 :配置按键用到的I/O口 * 输入 :无 * 输出 :无 */ void Key_GPIO_Config(void) { GPIO_Init ...
linux 进入 GNOME X 界面
CentOS 安装Gnome CentOSVmwareLinuxBlogHTML 刚开始装系统的时候,没有选Gnome或者KDE,现在想装个玩玩. 简单的安装可以参考这个:http://huruxi ...