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 ...

随机推荐

centos7 minimal connect： Network is unreachable(转）
新装的centos7,果然是很崭新啊. 装好之后打算看一下局域网的地址,然后就ip addr(centos 7 已经去掉了ifconfig这个命令).并没有显示局域网的ip地址. 然后我尝试ping ...
NDK官方开发指南翻译之 NDK_GDB
这几天看JNI,没有基础,那真是难受--把看到的相关资料记录一下,也分享给刚開始学习的人. 'ndk-gdb' Overview 重要:假设你要调试线程相关的程序.请阅读以下的'Thread Supp ...
POSTGRESQL同步——SLONY-I配置
来自:http://bbs.chinaunix.net/thread-955564-1-1.html 参考文档 http://bbs.chinaunix.net/viewthr ... page%3D ...
UnrealEngine4.5 BluePrint初始化中遇到编译警告的解决办法
今天遇到一个问题,如下图: 假如你在一个BP的初始化脚本里用了"Get Player Character",编译BP时候就会遇到上述警告(Warning Function ' Ge ...
android中几个很有用的的api
0x0001 public PackageInfo getPackageArchiveInfo (String archiveFilePath, int flags) Since: API Level ...
8.1.3 在BroadcastReceiver中启动Service
2010-06-21 16:57 李宁中国水利水电出版社字号:T | T <Android/OPhone开发完全讲义>第8章Android服务,本章主要介绍了Android系统中的服 ...
SDUTOJ 2712 5-2 派生类的构造函数
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUl9NaXNheWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
win8 应用商店。 app下载的音乐和视频软件能打开，不能正常播放解决方法
win8 应用商店.app下载的音乐和视频软件能打开,不能正常播放安装完win8之后,下载了PPS,可以正常播放.但是过了几天之后,就不能播放了,又从网络上下载了其他的音乐和视频相关的软件, 都不可 ...
Centos使用光盘作为本地yum源
[root@localhost CentOS]# mkdir /media/CentOS把光盘加载到本地[root@localhost CentOS]# mount /dev/cdrom /media ...
sigaction()之sa_mask
man文档描述: sa_mask gives a mask of signals which should be blocked during execution of the signal hand ...