创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);

1.创建节点

createElement(标签名) ：创建一个指定名称的元素。

var  tag=document.createElement(“input")

            //tag.setAttribute('type','text');

             tag.type = "text" // 推荐使用这种方式，简单
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="div1"></div>

</body>

<script>

    var tag = document.getElementsByClassName("div1")[0];

    console.log(tag);

    var tag_input = document.createElement("input");

    tag_input.type = "text";

    //tag_input.setAttribute('type',"submit");

    tag.appendChild(tag_input);

</script>

</html>

2.添加节点

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)

把增加的节点放到某个节点的前边

somenode.insertBefore(newnode,某个节点);

3.删除节点

removeChild()：获得要删除的元素，通过父元素调用删除

4.替换节点

somenode.replaceChild(newnode, 某个节点);

5.节点属性操作

　　1.获取文本节点的值：innerText    innerHTML

　　　　innerText:不管你是赋值还是取值，只能识别纯文本

     innerHtml:既可以识别纯文本，也可以识别标签
//    文本属性

//  1.innerText:不管你是赋值还是取值，只能识别纯文本

        var a1 = document.getElementsByClassName('c2')[0];

//        console.log(a1);

        //取值操作

        console.log(a1.innerText); //你好吗/

        console.log(a1.innerHTML); //你好吗/

        //赋值操作

        a1.innerText='Egon';

        a1.innerHTML='<a href="">hello</a>';

//  2.innerHtml:既可以识别纯文本，也可以识别标签

        var b1 = document.getElementsByClassName('c2')[1];

//        console.log(b1);

        //取值操作

        console.log(b1.innerText);

        console.log(b1.innerHTML);

        //赋值操作

        b1.innerText = 'lala';

        b1.innerHTML = '<input type="text">';

　　2.属性（attribute）操作：

elementNode.setAttribute(name,value)

 elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

 elementNode.removeAttribute(“属性名”);

泛指所有的属性
　　getAttribute 可以操作其他的，，但是不可以操作class

<body><div class="c1" id="d1">DIV</div>

<script>

    var ele = document.getElementsByClassName('c1')[0];

    ele.id='d2';//修改id

    console.log(ele);

//取属性值 :

//    方式一

    console.log(ele.getAttribute('id'));

//    方式二

    console.log(ele.id);

/ 属性赋值

//    方式一

    ele.setAttribute('id','d3');

    console.log(ele);

//    方式二

    ele.id = 'd3';

    console.log(ele);

　　3.value获取当前选中的value值

　　  1.input

　　2.select （selectedIndex）

　　3.textarea

　　

　4.关于class的操作：

//    class属性=============

     var ele = document.getElementsByClassName('c1')[0];

     console.log(ele.className); //打印类的名字

     ele.classList.add('hide');

     console.log(ele); //<div class="c1 hide" id="d1">

     ele.classList.remove('hide');//吧添加的remove移除了

     console.log(ele)

　　5.改变css样式：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

                             .style.fontSize=48px

增删改查的实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1, .div2, .div3, .div4 {

            width: 300px;

            height: 100px;

        }

        .div1 {

            background-color: darkblue;

        }

        .div2 {

            background-color: yellow;

        }

        .div3 {

            background-color: coral;

        }

        .div4 {

            background-color: aqua;

        }

    </style>

</head>

<body>

<div class="div1">

    <button onclick="add()">add</button>

    hello div1

</div>

<div class="div2">

    <button onclick="del()">del</button>

    hello div2

</div>

<div class="div3">

    <button onclick="change()">change</button>

    <p>hello div3</p>

</div>

<div class="div4">

    hello div4

</div>

</body>

<script>

    function add() {

        var ele = document.createElement("p")

        ele.innerHTML = "<h2>hello p</h2>";

        ele.style.color = "red";

        ele.style.fontSize = "10px";

        var father = document.getElementsByClassName("div1")[0];

        father.appendChild(ele);

    }

    function  del() {

        var ele = document.getElementsByClassName("div1")[0];

        var to_del = ele.getElementsByTagName("p")[0];

        if (to_del)

            ele.removeChild(to_del);

    }

    function change() {

        var img_ele = document.createElement("img");

        img_ele.src = "1.jpg";

        var father = document.getElementsByClassName("div3")[0];

        var p_ele = father.getElementsByTagName("p")[0];

        father.replaceChild(img_ele, p_ele);

    }

</script>

</html>

例子

JavaScript（JS）之Javascript对象DOM之增删改查（四）的更多相关文章

  1. JavaScript之DOM的增删改查

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

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  6. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  7. 第 9 章 DOM 的增删改查

    DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...

  8. python之类与对象属性的增删改查

    类属性与对象属性的增删改查 类属性的增删改查 class School: """ 文档 """ Teacher = "老王&quo ...

  9. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

随机推荐

  1. wireshark抓包获取好友ip，定位所在位置

    1.打开wireshark 2.按Ctrl + F 键进行搜索 1,选择搜索 “字符串”; 2,选择搜索 “分组详情”; 3,填写搜索数据 “020048″; 3.对qq好友发起语言或视频通话(需要对 ...

  2. 用python写一个预警机器人（支持微信和钉钉）

    背景 线上的系统在运行中,发生故障时怎么及时的通过手机通知到相关人员?当然这是个很简单的需求,现有的方法有很多,例如: 如果我们用的云产品,那么一般都会有配套对应的监控预警功能,根据需要配置一下即可, ...

  3. Lodop连续打印内容逐渐偏移怎么办

    Lodop打印控件中,可以使用打印机自带的纸张名称,也可以自定义纸张.(SET_PRINT_PAGESIZE语句).通常进行打印开发,为了避免浪费纸张,会用虚拟打印机效果作为依据,虚拟打印机连续打印多 ...

  4. JQuery跳出each循环的方法(包含数组遍历）

    0. 前言 也许我们通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环?(即用each方法内,当不满足条件时想break跳出循环体,想continue继续执行下一个循环遍 ...

  5. Nginx 针对建立TCP连接优化

    L:124 sysctl -a | grep file-max //通过命令查看系统最大句柄数 [root@3 ~]# sysctl -a | grep file-max fs.file-max = ...

  6. [洛谷P1273] 有线电视网

    类型:树形背包 传送门:>Here< 题意:给出一棵树,根节点在转播足球赛,每个叶子节点是一个观众在收看.每个叶子结点到根节点的路径权值之和是该点转播的费用,每个叶子节点的观众都会付val ...

  7. codeforces1096G Lucky Tickets

    题目链接:https://codeforces.com/problemset/problem/1096/G 大意:给出\(k\)个数码\(d_1,d_2,\cdots,d_k\),构造一个由这\(k\ ...

  8. 【BZOJ4653】【NOI2016】区间 线段树

    题目大意 数轴上有\(n\)个闭区间\([l_1,r_1],[l_2,r_2],\ldots,[l_n,r_n]\),你要选出\(m\)个区间,使得存在一个\(x\),对于每个选出的区间\([l_i, ...

  9. 「AtCoder Grand018B」Sports Festival（暴力）

    题目链接B - Sports Festival 题意 n(1~300)个人m(1~300)个活动,\(A_{ij}\)表示i第j喜欢的活动,每个人选择在举办的活动里最喜欢的,因此可以通过选择一些活动来 ...

  10. iptable四表五链

    链(内置): PREROUTING:对数据包作路由选择前应用此链中的规则: INPUT:进来的数据包应用此规则链中的策略: FORWARD:转发数据包时应用此规则链中的策略: OUTPUT:外出的数据 ...