您的位置:首页 > Web前端 > JavaScript

js Dom节点的获取 以及相关操作

2016-09-01 01:03 671 查看
<!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";

4000
but.innerHTML="✘";
}
}

</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: