JS DOM节点增删改查 属性设置

一.节点操作

createElement(name)创建元素
appendChild();将元素添加

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

第一种方式:

使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性          

使用innerHTML属性修改元素的内容

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部

    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }

</script>

二.修改 HTML DOM

  • 改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ,innerText。

改变 CSS 样式

  

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

  • 创建新的 HTML 元素

createElement(name)

  • 删除已有的 HTML 元素

elementNode.removeChild(node)

  • 关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

原文地址:https://www.cnblogs.com/icemonkey/p/10498890.html

时间: 2024-10-12 14:26:57

JS DOM节点增删改查 属性设置的相关文章

DOM节点增删改操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点增删改操作</title> </head> <body> <p id="s"><span id="ss">b</span><a id="sss">b<

js操作indexedDB增删改查示例

js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var req = indexedDB.open("TestDB", 1); req.onupgradeneeded = function(e) { var db = req.result; // var store = db.createObjectStore("student"

java中XML操作:xml与string互转、读取XML文档节点及对XML节点增删改查

一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = DocumentHelper.parseText(xmlStr); // XML转字符串 Document document = ...; String text = document.asXML(); //这里的XML DOCUMENT为org.dom4j.Document 二.读取XML文档节点: pack

JS源生代码“增删改查”之增

51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部分的HTML代码 <div id="addDialog"> <div id="div11"> <form action="" id="from"> <table class="b

laravel 增删改查 数据库设置 路由设置

laravel 框架的路由设置: url: http://www.shanzezhao.com/laraverl/my_laravel/public/index.php/indexs laravel 框架的数据库设置:config/database.php 1 'mysql' => [ 2 'driver' => 'mysql', 3 'host' => 'localhost', 4 'port' => '3306', 5 'database' => 'laravel', 6

DOM操作增删改查

通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口.这个入口,连同对HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM). 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 原生方式 1.获取 getElementBy

js数组的增删改查

array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; ? // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一个元素 // 数组的pop方法用于将数组的最后一个元素移除 var arr = [1,2,3]; ? // 返回 被删除的元素: arr.pop(); unshift 从数组前面添加一个或多个元素 var arr = [1,2,3]; ? // 返回:修改后数组的长度 arr.unshift(4,5

js 数组的增删改查

js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr.length-1]);//bbb arr.pop(); //al

一个JS Class的“增删改查”

function AA (){ var r={}; this.get = function(key){  return r[key]; } this.put = function(key,x){  r[key] = x; } this.each = function (Func) {  for (var v in r) {   Func(v, r[v]);  } } this.remove = function (key) {  delete r[key]; } }