js文档节点

一、创建节点：

　　1、创建元素节点：document.createElement("元素标签名"); 此方法可返回一个 Element 对象

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>节点的方法</title>

    </head>

    <body>

        <button onclick="addElementNode()">创建元素节点：点我试试看看</button>

        <script type="text/javascript">

            function addElementNode(){ 
　　　　　　　　　// 创建元素节点

                var btn = document.createElement('button');

                var con = document.createTextNode('测试');

                btn.appendChild(con);

                document.body.appendChild(btn);

            }

        </script>

    </body>

</html>

　　2、创建属性节点：两种方法，案例如下；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>节点的方法</title>

    </head>

    <style type="text/css">

        a {

            display: block;

            width: 200px;

            height: 200px;

            background: red;

        }

        .demo-class{

            color: red;

        }

    </style>

    <body>

        <!--创建属性节点-->

        <button onclick="addAttrNode(this)">创建属性节点：点我看看</button>

        <h1>创建属性节点</h1>

        <script type="text/javascript">

            function addAttrNode(obj) {

                // 用obj.setAttribute()

                var a = document.createElement('a');

                document.body.appendChild(a);

                a.setAttribute('href', 'http://www.baidu.com');

                // 用obj.setAttributeNode()；createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性

                var h1=document.getElementsByTagName("H1")[0];

                var att=document.createAttribute("class");

                att.nodeValue="demo-class";

                h1.setAttributeNode(att);

            }

        </script>

    </body>

</html>

　　注释：createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性；

　　3、创建文本节点

        <!--创建文本节点-->

        <script type="text/javascript">

            // 用document.body.innerHTML直接创建

            document.body.innerHTML = '<h1>创建文本节点</h1>';

            // 用document.createTextNode("文本");

            var aa = document.createTextNode("<h2>12345</h2>");

            document.body.appendChild(aa);

        </script>

　　4、追加的方法：

        <!--追加到页面当中-->

        <ul id="father">

            <li class="son1">这是一一一</li>

            <li class="son2">这是二二二</li>

            <li class="son3">这是三三三</li>

        </ul>

        <script type="text/javascript">

            // obj.appendChild;

            //父对象.insertBefore(要插入的对象,之前的对象);

            var newItem = document.createElement('li');

            var textItem = document.createTextNode('11111111');

            newItem.appendChild(textItem);

            var list = document.getElementById("father")

            list.insertBefore(newItem, list.childNodes[3]);

        </script>

　　注释：

　　　　首先请创建一个 LI 节点。

　　　　然后创建一个文本节点。

　　　　然后向这个 LI 节点追加文本节点。

　　　　最后在列表中的首个子节点之前插入此 LI 节点。

　　PS：我们来了解一下appendChild()方法和insetBefore()方法的区别

　　appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)；

　　insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法：insertBefore(newchild,refchild)；

　　相同之处：插入子节点。

　　不同之处：实现原理方法不同。

　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）；

　　　　insertBefore 方法是在已有的节点前添加新的节点（相对于子节点来说的）。

        <div class="btns">

            <input type="button" value="插入元素" id="creatbtn" />

        </div>

        <div id="box-one">

            <p class="con2" id="p1">1</p>

            <p class="con2">2</p>

            <p class="con2">3</p>

        </div>

        <script type="text/javascript">

            window.onload = function() {

                var btn = document.getElementById("creatbtn");

                btn.onclick = function() {

                    insertEle();

                }

            }

            function insertEle() {

                var oTest = document.getElementById("box-one");

                var newNode = document.createElement("div");

                newNode.innerHTML = " This is a newcon ";

                oTest.appendChild(newNode);                                 // 第一种方法

                oTest.insertBefore(newNode, null);                          // 第二种方法 
　　　　　　　　　 oTest.insertBefore(newNode, document.getElementById('p1'))；//新建的元素插入到p1元素之前
　　　　　　　　　 oTest.insertBefore(newNode,document.getElementById('p1').nextSibling); //新建的元素节点插入到 id为p1后面节点元素的前面， 也就是说插入到id为P1节点元素的后面

            }

        </script>

　　这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。

　　document.getElementById('p1').nextSibling ：取得的是document.getElementById('p1')对象的紧跟着的下一个节点。

　　previousSibling - 取得某节点的上一个同级节点。

　　由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

　　5、删除节点的方法：

        <div class="btns">

            <input type="button" value="插入元素" id="creatbtn" />

        </div>

        <div id="box-one">

            <p class="con2" id="p1">1</p>

            <p class="con2" id="p2">2</p>

            <p class="con2" id="p3">3</p>

        </div>

        <script type="text/javascript">

            // 删除节点

            var father = document.getElementById('box-one');

            var son1 = document.getElementById('p1');

            father.removeChild(son1);

            son1 = null;

        </script>

　　6、修改（替换）节点：父对象.replaceChild(新对象，要替换的对象);

        <div class="btns">

            <input type="button" value="插入元素" id="creatbtn" />

        </div>

        <div id="box-one">

            <p class="con2" id="p1">1</p>

            <p class="con2" id="p2">2</p>

            <p class="con2" id="p3">3</p>

        </div>

        <!--修改替换节点-->

        <script type="text/javascript">

            var parent = document.getElementById('box-one');

            var ele = document.createElement('h1');

            ele.className = 'newEle';

            ele.innerHTML = '新节点';

            var p1 = document.getElementById('p1');

            parent.replaceChild(ele, p1);

        </script>

　　7、克隆节点：newobj=obj.cloneNode(deep) ；

        <div class="btns">

            <input type="button" value="插入元素" id="creatbtn" />

        </div>

        <div id="box-one">

            <p class="con2" id="p1">1</p>

            <p class="con2" id="p2">2</p>

            <p class="con2" id="p3">3</p>

        </div>

        <!--克隆节点-->

        <script type="text/javascript">

            var parent = document.getElementById('box-one');

            newParent = parent.cloneNode(true);

            document.body.appendChild(newParent);

        </script>

    </body>

　　注释：

　　　　a、cloneNode() 方法创建节点的拷贝，并返回该副本

　　　　b、cloneNode() 方法克隆所有属性以及它们的值。

　　　　c、如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。默认是false。

　　呵呵呵。。。有些方法不只是作用于定义的那些特性，只要符合语法，结合一些属性总会有意想不到的收获。

　　作为初学者，我懂的不多，或许我的理解还很浅薄，有些可能理解错了，希望看到的能够给我提点下，我不求别的，我只希望在这里记录点点滴滴和吸取大家的建议来促进我的成长。。。。。。。

js文档节点的更多相关文章

js文档节点关系
这一节简单介绍一下文档节点方面的相关内容: 一:获得节点关系的属性 1.获得该元素父节点的引用:obj.parentNode: <div class="content"> ...
jQuery文档节点处理，克隆，each循环，动画效果，插件
文档节点处理 //创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$(&quo ...
深入理解DOM节点类型第七篇——文档节点DOCUMENT
× 目录 [1]特征 [2]快捷访问 [3]文档写入前面的话文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...
gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查
一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = D ...
solr schema.xml文档节点配置
首先,讲解一下/usr/local/solr/collection1/conf/schema.xml的配置,此文档功能类似于配置索引数据库. Field:类似于数据库字段的属性(此文统一使用用“字段” ...
Java获取XML节点总结之读取XML文档节点
dom4j是Java的XML API,用来读写XML文件的.目前有很多场景中使用dom4j来读写xml的.要使用dom4j开发,需要下载导入dom4j相应的jar文件.官网下载:http://www. ...
JS文档生成工具：JSDoc 介绍
JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

随机推荐

Java集合源码学习（三）LinkedList
前面学习了ArrayList的源码,数组是顺序存储结构,存储区间是连续的,占用内存严重,故空间复杂度很大.但数组的二分查找时间复杂度小,为O(1),数组的特点是寻址容易,插入和删除困难.今天学习另外的 ...
【UOJ 209】【UER #6】票数统计
题解: jls的题目还是比较好的首先比较显然我们可以分析出当x<y时,显然只能满足前缀条件针对这一档部分分,是个简单的组合数考虑一下后缀限制,发现真的不好搞.. 看了题解发现,枚举总共的 ...
windows server 2008性能测试出现大量time_wait
netstat -an | find "TCP" /C netstat -an | find "TIME_WAIT" /C taskkill /im mmdrv ...
Flink-- 数据输出Data Sinks
flink在批处理中常见的sink 1.基于本地集合的sink(Collection-based-sink) 2.基于文件的sink(File-based-sink) 基于本地集合的sink(Coll ...
Java程序员如何选择未来的职业路线
一.程序员的特性技术出身的职场人特性很明显,与做市场.业务出身的职场人区别尤其明显.IT行业中常见的一些职场角色:老板.项目经理.产品经理.需求分析师.设计师.开发工程师.运维工程师等.开发工程师具 ...
crc循环冗余检验
CRC(Cyclic Redundancy Check):循环冗余检验.在链路层被广泛使用的检错技术. CRC原理: 1.发送端 1.1.在发送端先将数据分组,每组k个数据.假定要传送的数据是M. 1 ...
035 控制并发 select * from test1 where id =1 for update 就会对这行加锁了？
今天在看同事程序的时候,看到这种用法,顺便学习下. 一:理论 1.功能这个功能是上锁. 上的是一个排它锁,也就是说,其他的事务是可以读取的.但是不能写入或者更新. 二:实践 1.创建表 2.提交一条 ...
detailFormatter bootstrapTable
detailView : true,//会导致表格最开头多出一列 detailFormatter :function(index, row, element){ var image = '<di ...
给力的移动 FZU - 2287
你的弟弟给你安排了一个任务,他给了你1到N个数字的乱序排列,现在你想给你的弟弟秀一波操作,操作最少的次数把序列变成1到N的顺序排列,每次操作你可以选择序列中的一个数字并把它移动到序列的头部或尾部. I ...
HDU 4027 Can you answer these queries【线段树】
<题目链接> 题目大意: 给定一段序列,现在对指定区间进行两种操作:一是对指定区间进行修改,对其中的每个数字都开根号(开根号后的数字仍然取整):二是对指定区间进行查询,查询这段区间所有数字 ...

js文档节点

js文档节点的更多相关文章

随机推荐

热门专题