js--DOM概况及封装函数

最新推荐文章于 2022-04-25 20:59:57 发布

泽哈哈

最新推荐文章于 2022-04-25 20:59:57 发布

阅读量262

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42134836/article/details/106733725

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

概念
DOM中节点种类一共有三种
【注】在JS中所有节点都是对象。

<div title="属性节点">文本</div>

元素节点

属性节点 title=“属性节点”
文本节点文本

document.getElementById(id);
【功能】通过当前元素节点的id，获取对应元素节点。
元素节点属性
通过这个节点对象，访问它的一系列属性。
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签间的内容

HTML属性
id
title
style
className
访问这些属性：
元素节点.属性名
元素节点【属性名】

var oDiv = document.getElementById("id");
alert(oDiv.tagName);
alert(oDiv.innerHTML);
alert(oDiv.id);
alert(oDiv.title);
alert(oDiv.className);
alert(oDiv.style);	//[objece CSS2Properties]	样式对象
alert(oDiv.style.width);
oDiv.title = "world";
oDiv.className = "xxx";
oDiv.style.width="400px";
/*
	在style样式中
	background-color	使用-链接的属性
	访问的时候，需要将-去掉，然后将后续单词的首字母大写
*/
alert(oDiv.style.backgroundColor);
oDiv.style.backgroundColor="blue";

document.getElementsByTagName()
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点
返回值：一个装有符合条件的元素节点的数组。

//获取当前页面上所有li标签
var arr = document.getElementsByTagName("li");
alert(arr);	//[object HTMLCollection]	是一个数组
//alert(arr.length);

//获取ull下的所有li标签
var ull = document.getElementById("ull");
var ali = ull.getElementsByTagName('li');
//alert(ali.length);
for(var i = 0;i<ali.length;i++) {
	alert(ali[i].innerHTML);
	
	alert(ali.item(i).innerHTML);
}

<ul id="ull">
	<li>111</li>
	<li>222</li>
	<li>333</li>
</ul>

document.getElementsByName()
参数：name的值
返回值：装有符合条件的元素节点的数组
【注】name属性一般情况下，只有文本输入框的元素节点才有。

var nodes = document.getElementsByName("hello");
alert(nodes.length);

<div name="hello"></div>

document.getElementsByClassName()
功能：获取node节点下，所有符合条件的元素节点。
参数：clss
返回值：所有符合条件的元素节点组成的数组。
【注】getElementsByClassName在低版本IE浏览器不支持。

//var nodes = document.getElementsByClassName("box");
//alert(nodes);	//object HTMLCollection
//alert(nodes.length);

//获取ul下的class为box的元素节点
/*var ull = document.getElementById("ull");
var nodes= ull.getElementsByClassName('box');

for(var i=0; i< nodes.length;i++) {
	alert(nodes[i].innerHTML);
}*/

var ull = document.getElementById("ull");
var nodes= elementByClassName(ull,'box');

for(var i=0; i< nodes.length;i++) {
	alert(nodes[i].innerHTML);
}

//封装函数，封装一个兼容的方法
function elementByClassName(parent, calss) {
	//<1>找到parent下所有的元素节点
	var nodes = parents.getElementsByTagName('*');
	var result = [];//用记录符合条件的元素节点
	for (var i =0; i<nodes.length;i++) {
		result.push(nodes[i]);
	}
	return result;
}

<ul id="ull">
	<li clss="box">111</li>
	<li>222</li>
	<li clss="box">333</li>
</ul>

getComputedStyle(元素节点)[获取样式类型]；火狐/谷歌/safari支持
元素节点.currentStyle[获取样式类型]; IE
【注】浏览器兼容

var oDiv = document.getElementById("id");
//alert(getComputedStyle(oDiv)['width']);

alert(getStyle(oDiv, "width"));
//获取当前样式的兼容函数
function getStyle(elem, attr) {
	return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}

封装函数

/*
	通过封装函数	简化操作/
	封装一个函数，可以拥有上述几种获取元素节点的功能。
	【注】css选择器
		#id		通过id获取元素节点
		.class	通过className获取元素节点
		tagName	通过tagName获取元素节点
		name=xxx通过name获取元素节点
*/
function $(vArg) {
	//<1>对参数进行区分。
	switch(vArg[0]) {
		case "#"://id
			return docuemnt.getElementById(vArg.substring(1));
			break;
		case "."://className
			return elementByClassName(document, vArg.substring(1));
			break;
		default:
			//对参数的前五个字符，进行判断
			var str = vArg.substring(0,5);
			if (str == "name=") {//name
				return docuemnt.getElementsByName(vArg.substring(5));
			} else {
				return document.getElementsByTagName(vArg);
			}
			break;
	}
}

function elementByClassName(parent, calss) {
	//<1>找到parent下所有的元素节点
	var nodes = parents.getElementsByTagName('*');
	var result = [];//用记录符合条件的元素节点
	for (var i =0; i<nodes.length;i++) {
		result.push(nodes[i]);
	}
	return result;
}

window.onload = function() {
	//id
	alert($("#div1").innerHTML);//111
	
	//className
	alert($(".box").length);//2
	alert($(".box")[1].innerHTML);//333
	
	//tagName
	alert($("div").length);//4
	
	//name
	alert($("name=hello")[0].innerHTML);//444
	alert($("name=hello").length);//1
}


<div id="div1">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div name="hello">444</div>

set/getAttribute()
removeAttribute()
【注】都是操作当前元素节点中某个属性的

window.onload = function() {
	var oDiv = document.getElementById("div1");
	alert(oDiv.getAttribute("title"));
	
	oDiv.setAttribute("title", "xxx");

	oDiv.removeAttribute("title");//直接去掉title
}

<div id="div1" title="hello"></div>

childNodes 获取当前元素节点的所有的子节点
【注】节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType 和 nodeValue。

var arr = docuemnt.getElementById("id");
alert(arr.childNodes[0].nodeName);
alert(arr.childNodes[0].nodeType );
alert(arr.childNodes[0].nodeValue);

alert(arr.childNodes[0].nodeName);
alert(arr.childNodes[1].nodeType );
alert(arr.childNodes[1].nodeValue);

firstChild 当前元素节点子节点的第一个
lastChild 快速找到元素节点子节点的最后一个

var arr = docuemnt.getElementById("id");
alert(arr.firstChild.nodeName);
alert(arr.lastChild.nodeName);

删除空白节点

var arr = docuemnt.getElementById("id");
var nodes = removeSpaceNode(arr.childNodes);
alert(nodes[0].nodeName);

/*
使用firstChild	lastChild
必须从父节点上删除空白节点
*/
removeSpaceNode2(arr);
alert(arr.childNodes.length);
alert(arr.firstChild.nodeName);

function removeSpaceNode2(parent) {
	var nodes = parent.childNodes;
	for(var i = nodes.length -1;i>=0;i--) {
		if(nodes[i].nodeValue == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
			parent.removeChild(nodes[i]);
		}
		result.push(nodes[i]);
	}
	return result;
}

function removeSpaceNode(nodes) {
	var result = [];//用来存放不是空白节点的
	for(var i = 0; i<nodes.length;i++) {
		//判断是否是空白节点
		if(nodes[i].nodeValue == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
			continue;
		}
		result.push(nodes[i]);
	}
	return result;
}

ownerDocument 属性
【注】ownerDocument
属性返回该节点的文档对象根节点，返回的对象相当于 document 。

parentNode 属性返回该节点的父节点
previousSibling 属性返回该节点的前一个同级节点
nextSibling 属性返回该节点的最后一个同级节点

var arr = document.getElementById("id");
alert(arr.ownerDocument == document);//true

attribute 属性返回该节点的属性节点集合。
集合特点：1、不重复 2、无序

属性
attributes.length 返回属性节点个数

var arr = document.getElementById("div1");
alert(arr.attributes);//[object NamedNodeMap]
alert(arr.attributes.length);

//访问其中一个属性节点
alert(arr.attributes.getNamedItem("id"));//object Attr
alert(arr.attributes["id"]);

/*
	属性节点
	nodeName	nodeType	nodeValue
	属性名		类型2		值
*/
alert(arr.attributes["id"].nodeName);//id
alert(arr.attributes["id"].nodeType);//2
alert(arr.attributes["id"].nodeValue);//div1

<div id="div1" title="hello" name="world" class="box"></div>

createElement()
【格式】document.createElement(标签名);
appendChild()
【格式】parent.appendChild(newNode)
功能：将newNode插入到parent子节点的末尾。
createTextNode()
【格式】document.createTextNode(文本)
功能：创建文本节点

window.onload = function() {
	var arr = document.getElementById("div1");
	/*//创建span节点
	var node =	document.createElement("span");
	//给span节点中添加文本
	var oText = document.createTextNode("文本");
	//将文本插入到节点中
	node.appendChild(oText);*/
	
	var node = createElementWidhtTxt("span", "文本");
	//
	arr.appendChild(node);
	
}
//创建带文本的元素节点
function createElementWidthTxt(tagName, txt) {
	var node =	document.createElement(tagName);
	var oText = document.createTextNode(txt);
	node.appendChild(oText);
	return node;
}


<div id="div1"></div>

insertBefore()
【格式】父节点.insertBefore(插入的节点，旧节点)
功能：将插入的节点插入到旧节点之前。

window.onload = function() {
	//创建一个<strong>将这个节点插入到span节点之前
	//1、创建strong
	var node = createElementWidthTxt("strong", "strong文本");
	var oSpan = document.getElementsByTagName("span")[0];
	//2、进行插入
	oSpan.parentNode.insertBefore(nodem oSpan);
	insertAfter(node, oSpan);
}

function insertAfter(newNode, oldNode) {
	//判断oldNode是否是最后一个节点
	var parent = oldNode.parentNode;
	if (oldNode == parent.lastChild) {
		//最后一个节点，直接插入到子节点的末尾
		parent.appendChild(newNode);
	}else {
		//插入到oldNode的下一个节点之前
		parent.insertBefore(newNode, oldNode.nextSibling);
	}
}

<div id="div1">
	<p>p</p>
	<span>span</span>
	<em>em</em>
</div>

replaceChild()
【格式】parent.replaceChild(newNode, oldNode);
功能：用newNode将oldNode给替换掉。
cloneNode()
【格式】node.cloneNode()
功能：克隆节点
返回值：新克隆出来的节点
参数：true 默认是false 如果传true，就会复制元素节点中的文本

removeChild()
【格式】node.parentNode.removeChild(node);
功能：删除节点

window.onload = function() {
	/*var arr = document.getElementById("div1");
	var node = document.createElement("strong");
	arr.parentNode.replaceChild(node, arr)*/
	
	
	/*var arr = document.getElementById("div1");
	var oSpan = document.getElementsByTagName("span")[0];
	var node = arr.cloneNode(true);
	//将div添加到span节点的前面
	oSpan.parentNode.insertBefore(node, oSpan);*/
	
	
	var arr = document.getElementById("div1");
	arr.parentNode.removeChild(arr);
};

<span>span</span>
<div id="div1">div</div>
<p>p</p>