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会从/**开头 ...
随机推荐
- Python初次安装使用教程
Python官网: https://www.python.org/downloads/ 当前版本为3.7.0 下载(64位系统)exe文件进行安装. 双击安装运行 选择自定义安装路径 ...
- net core体系-web应用程序-3项目结构、配置文件详解
一.应用程序文件结构 如下图所示,相比于Asp.Net项目,在新建的Asp.Net Core项目中,没有了Global.asax以及Web.config这样的文件,但多了几个其他主要的文件,它们分别为 ...
- js前端ajax提交list集合参数至后端
var orderNosList = new Array(); var rows = $("#dg_linkOrder").datagrid("getChecked&qu ...
- Codeforces 912C Perun, Ult!
Perun, Ult! 恶心题, 好多细节... 啊, 好恶心啊. #include<bits/stdc++.h> #define LL long long #define fi firs ...
- 1、Qt Project之基本文件打开与保存
基本文件打开与保存: 首先是涉及到的头文件,我们需要在mainwindow.h包含头文件: #include <QFileDialog> #include <QFile> #i ...
- linux(manjaro)磁盘迁移/opt /home
目录 1. 创建临时挂载点/opt, 并将分区挂载到临时挂载点上: 2. 切换单用户,将除了root用户之外的用户踢出 3. 将/opt目录下的所有内容拷贝到临时挂载点中,等待结束 4. 进入/et ...
- bootstrap页面sidebar
function change_active(select_item){ $('.mail-navigation').find('li').each(function(){ $(this).remov ...
- Python 合并两个列表的多种方式，合并两个字典的多种方式
一.合并列表 1.最简单的,使用+连接符: >>> a = [1,2,3] >>> b = [7,8,9] >>> a + b [1, 2, 3, ...
- Java中位运算符的使用
先预知识: 数据在计算机中是以二进制的形式进行存储的,而二进制在内存中是以补码的形式进行存储的.在介绍位运算之前,首先来看一下原码.反码和补码的概念.由于正数的原码.反码和补码的形式都是一样的,所以以 ...
- Callable与Runable接口 submit与execute区别
execute(Runnable x) 没有返回值.可以执行任务,但无法判断任务是否成功完成. submit(Runnable x) 返回一个future.可以用这个future来判断任务是否成功完成 ...