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

随机推荐

pgmagick,pil不保存图片并且获取图片二进制数据记录
PIL和pgmagick都是python中图像处理的库,只不过PIL功能更强大 pgmagick和PIL中对数据进行调整后经常需要调用write或者save方法保存图片,然后在读取图片的内容,这样很麻 ...
Python3环境安装Scrapy爬虫框架过程及常见错误
收录待用,修改转载已取得腾讯云授权 Scrapy安装介绍 Scrapy的安装有多种方式,它支持Python2.7版本及以上或Python3.3版本及以上.下面说明Python3环境下的安装过程. Sc ...
chrome护眼模式
chrome护眼模式使用stylish插件: 学习:https://jingyan.baidu.com/article/b907e627f74df146e6891c67.html 插件下载:http ...
java中short、int、long、float、double取值范围
一.分析基本数据类型的特点,最大值和最小值.1.基本类型:int 二进制位数:32包装类:java.lang.Integer最小值:Integer.MIN_VALUE= -2147483648 (-2 ...
TreeView 拖拽增删改
using Endv.Tools; using System; using System.Data; using System.Drawing; using System.IO; using Syst ...
阿里云部署Java web项目初体验
林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了怎样在阿里云上安装JDK.Tomcat以及其配置过程. 最后以一个实例来演 ...
使用 Apple Configurator 2 获取ipa文件
如今很多人想要获取到App Store上的包却苦于无奈,先在要把App Store上的包载下来获取ipa,最直接的就是从手机设备上导出了,但是手机必须要9.0以下才可以导出,鄙人手中正好有公司的测试机 ...
[Mac A]如何学习Mac编程？
http://ourcoders.com/thread/show/5550/ @tinyfool 看了您在quora上回答的『为什么说程序员是最好的职业』,加上本来就想学编程(但是一直以来因为各种借口 ...
python——list访问问题
rect.append({'bbox':[(int(rect1), int(rect2)), (int(rect3), int(rect4))]}) 应这样访问 rect[0]['bbox'][0][ ...
android 完美的tabhost 切换多activity布局
TabHost在很多应用都会使用到,有时候在TabHost添加的Tab中设置view不能满足需求,因为在view中添加如PreferenceActivity相当困难. 之前在一个应用中需要实现使用Ta ...