<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box_id {
width: 400px;
height: 200px;
background-color: pink;
cursor: pointer;
position: relative;
}
#box_id_c{
width: 200px;
height: 150px;
background-color: greenyellow;
margin-left: 20px;
border: 1px;
}
button{
position: absolute;
top: 10px;
right: 10px;
font-weight: 700;
font:700 30px/30px "微软雅黑";
}
.box_c_1 {
width: 100px;
height: 100px;
cursor: pointer;
border-color: red;
}
.yincang{
display: none;
}
.xianshi{
display: block;
}
</style>
</head>
<body>
<div id="box_id" title="aa" class="box_class">
<div id="box_id_c" class="box_class_c">深度复制</div>
<button id="but">✘</button>
</div>
<div id="box_id_1" class="box_class_1"></div>
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="21" />
<div id="box" value="111">NodeType,NodeName,NodeValue</div>
<script>
//Dom 节点获取
//理解：节点的关系是以属性方式存在的 节点不孤立 所以可以通过节点之间的相对关系获取
var boxId = document.getElementById("box_id"); // 查找id获取html标签(单一返回值)
var bqArr = document.getElementsByTagName("div"); // 查找标签名 (返回:标签数组) 由上之下子元素也包含
var boxCArr = document.getElementsByClassName("box_class"); //查找类名 (返回:标签数组) IE 5,6,7,8 中无效
var nameArr = document.getElementsByName("myInput"); //查找name标签 (返回:标签数组)
var nameArr = document.getElementsByTagNameNS("","");//只是它根据命名空间和名称来检索元素 只有使用命名空间的XML文档才会使用它
console.log(bqArr[0]); // 输出：<div id="box_id" class="box_class">
console.log("bqArr第一个元素是： "+ bqArr[0]); // 输出：bqArr第一个元素是： [object HTMLDivElement] ---》（发现会有类型转换）
//节点分类
// 父节点：(调用者).parentNode !!!!!
//
// 兄弟节点 ：
// 下一个兄弟节点:=====> (调用者).nextElementSibling || (调用者).nextSibling
// (调用者).nextSibling： 在IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）
// (调用者).nextElementSibling: 在火狐谷歌IE9都指的是下一个元素节点。
// 总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
//
// 前一个兄弟节点:=====> (调用者).previousElementSibling|| (调用者).previousSibling
// (调用者).previousSibling：IE678中指前一个元素标签 在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）
// (调用者).previousElementSibling： 在火狐谷歌IE9都指的是前一个元素节点。
// 总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
//
//
// 单个子节点:
// 第一个子节点：=====> 父节点.firstElementChild || 父节点.firstChild
// (调用者).firstChild：调用者是父节点 IE678中指第一个子元素标签在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）
// (调用者).firstElementChild: 在火狐谷歌IE9都指的第一个元素节点。
// 最后一个子节点：=====> 父节点.lastElementChild|| 父节点.lastChild
// (调用者).lastChild: IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）
// (调用者).lastElementChild： 在火狐谷歌IE9都指的最后一个元素节点。
//
// 所有子节点 !!!!!
// 父节点.childNodes：=====> 标准属性 获取所有节点包括HTML节点，所有属性，文本节点 火狐 谷歌等高本版会把换行也看做是子节点
// 父节点.children：=====> 非标准属性 但是几乎所有浏览器都支持 但不返回文本节点 。（使用较多）
//
// 随意节点： =====> 节点自己.parentNode.children[index];
//节点的操作
// 创建节点:
// 新的标签（节点） = document.createElement("标签名");
// var createDiv = document.createElement("div");
// 插入节点：
// 插入到最后： =====> 父节点.appendChild(新节点);
// boxId.appendChild(createDiv);
//
// 插入到指定节点之前： =====> 父节点.insertBefore(新节点,参考节点)在参考节点前插入;
// boxId.insertBefore(createDiv,bqArr[1]);
//
// 删除节点：
// 知道父节点：=====> 父节点.removeChild（子节点）；必须制定要删除的子节点
// box_id.removeChild();
// 不知道父节点： =====> node.parentNode.removeChild(box_id_c);
// bqArr[1].parentNode.removeChild(bqArr[1]);
//
// 复制节点 ：
// oldNode.cloneNode（true） //复制后需要重新插入 才有效果
// var copyNode = bqArr[1].cloneNode(true);
// boxId.appendChild(copyNode);
// console.log(bqArr[0]);
function getEle(id){
return document.getElementById(id);
}
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给定元素查找他的最后一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断，如果不是传递过来的元素本身，那么添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
//节点属性： =====> 调用者：节点。 有参数。 没有返回值。每一个方法意义不同
// 获取：getAttribute(名称)
// 设置：setAttribute(名称, 值)
// 删除：removeAttribute(名称)
var ele = document.getElementById("box");//元素节点
var att = ele.getAttributeNode("id");//属性节点
var txt = ele.firstChild;
//nodeType
console.log(ele.nodeType);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//nodeName
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//你好
//onclick事件 控制隐藏与消失
var but = document.getElementById("but");
but.onclick = function (){
if(but.innerHTML==="✘"){
bqArr[1].className = "yincang";
console.log(bqArr[1]);
but.innerHTML="✔";
}else{
bqArr[1].className = "xianshi";
but.innerHTML="✘";
}
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
