Javascript学习笔记(12) --DOM对象

一DOM
Document Object Model (文档对象模型)
二、获取节点
1》document.getElementById()  选取有id的节点
2》document.getElementsByTagName() 选取节点名称
3》document.getElementsByClassName() 获取有class 节点的

三、Dom树
日常能见到的树:
	树的部分:树枝 树干 果实
看不到:树(根)--最主要的

Document --- Html ----head|body------div| p |h1

四、节点 DOM对象

div
P
h1
input
span
……
***************************对象有属性 对象有方法*****************************
var arr = new Array();
arr.length
arr.join()
五、Dom对象(节点)的属性

1》childNodes  返回子节点的一个集合  
*************************子节点元素节点、文本节点、属性节点

2》nodeName 返回节点名称 大写 js 严格区分大小写的
3》nodeType 返回数字  (节点类型)
4》firstChild 获取到第一个子元素
5》lastChild 获取到最后一个字元素
6》firstElementChild 获取到第一个元素子节点
7》lastElementChild获取到最后一个元素子节点
8》parentNode 获取到父节点
9》nodeValue 节点文本  必须是文本节点才可以获取值  
***************************
注意:在ie8 或以下版本 firstChild 这个属性是获取的第一个元素节点 并且是第一个子元素,而firstElementChild 这个属性,在低版本不认识

*************返回的是1代表元素节点,返回的是3代表文本节点
六、节点的分类
<div id = ‘box’></div> 元素节点
<div id = ‘box’>123</div> 文本节点
<img src=’’ alt=’’/> 属性节点
七、 节点方法
1》getAttribute()  获取属性值
2》setAttribute()	设置属性值
3》removeAttribute()	删除属性值
八、节点的创建
1》创建元素节点
语法:document.createElement(元素名)
2》创建文本节点
语法:document.createTextNode(文本内容)
九、添加节点
1》追加
父元素.appendChild()
2》前置
父元素.insertBefore()
十、删除节点
语法 父元素.removeChild(删除的子元素)
十一、元素样式
box.style.样式名称 ====》只能获取都行内样式
****************************
如何获取样式表中的样式
1》	非IE
getComputedStyle(元素,null).样式名称
2》	IE(8)或IE(8)以下
box.currentStyle.样式名称
十二、元素大小
offsetWidth
offsetHeight
******注意
1》	没有加入单位的(类型:数值number)
2》	计算:
a)	计算边框(border)
b)	计算内边距(padding)
十三、元素偏移
offsetLeft
offsetTop
******注意
1》	没有加入单位的(类型:数值number)
2》	计算:
a)	计算margin
3》	定位
1)	如果没有定位:返回元素距离屏幕左侧(顶部)的偏移量
2)	如果有定位:返回元素左侧(顶部)和定位元素距离的偏移量

scrollTop
scrollLeft
**************滚动的距离
十四、获取宽度和搞定(文档、可视区域)
document.documentElement=文档的文档元素
document.body=文档的body

clientWidth
clientHeight
获取可视区域宽度和高度
十五、标准模式和混杂模式
标准模式 document.documentElement
混杂模式:document.body

兼容处理:
document.body || document.documentElement





//var box = document.getElementById("box");
/*var uls = document.getElementById("uls");
var lis = uls.getElementsByTagName("li");
//var lis = docuemnt.getElementsByTagName("li");
//文档对象 的 所有li元素
//alert(lis)
for(var i = 0 ; i < lis.length; i++){
	lis[i].style.background = "red";
}
*/
/*
var lis = document.getElementsByClassName("lis");
alert(lis.length)
for(var i = 0 ; i < lis.length ; i+=){
	lis[i].style.background = "orange"
}*/

//封装一个函数  实现可以获取到class 名的节点
//var dom = document.getElementsByTagName("*");//获取到所有的节点的个数
//alert(dom.length)
/*function fn(cName){
	//1>把页面上所有的节点都选取到
	//2》每一个节点的class 名称和参数cName做比较
	//3》如果相等,把节点添加到数组中,
	//4》最后返回数组
	var  dom = document.getElementsByTagName("*");
	var arr = [];
	for(var i = 0 ; i < dom.length; i++){
		if (dom[i].className.indexOf(cName) != -1){
			arr.push(dom[i])
		}
	}
	return arr;
}
var lis = fn("lis");
//alert(lis.length);

for(var i = 0 ; i < lis.length ; i ++){
	lis[i].style.background = "red"
}
*/


//轮播图js
/*var container = document.getElementById("container"),
	left = document.getElementById("left"),
	right = document.getElementById("right"),
	oul = document.getElementById("oul"),
	lis = oul.getElementsByTagName("li"),
	ool = document.getElementById("ool"),
	ols = ool.getElementsByTagName("li"),
	index = -1;
container.onmousemove = function(){
	left.style.display = "block";
	right.style.display ="block"
}
container.onmouseout= function() {
	left.style.display = "none";
	right.style.display ="none"
}
left.onclick = function(){
	for(var i = 0 ;  i < lis.length; i ++){
		lis[i].style.display = "none"
		ols[i].className = ""
	}
	index--;
	if(index < 0 ){
		index = lis.length - 1;
	}
	lis[index].style.display = "block";
	ols[index].className = "active"
}
right.onclick = function (){
	for(var i = 0 ;  i < lis.length; i ++){
		lis[i].style.display = "none"
		ols[i].className = ""
	}
	index++;
	if(index > lis.length - 1 ){
		index = 0;
	}
	lis[index].style.display = "block";
	ols[index].className = "active"
}
*/
//点击按钮切换
/*for (  var i = 0 ; i < ols.length; i++){
	
	ols[i].onclick = function(){
		for(var i = 0 ;  i < lis.length; i ++){
		lis[i].style.display = "none"
		ols[i].className = ""
		
		}
		
		
		alert(index)
		lis[index].style.display = "block";
		ols[index].className = "active"
	}
}*/
//Dom树
//var box = document.getElementById("box");
//alert(box);//dom对象
//var uls = document.getElementById("uls");
//alert(uls.childNodes.length)
//alert(uls.childNades[0])
//document.write(box.nodeName)
/*for( var i = 0;  i < uls.childNodes.length ; i++){
	if(uls.childNodes[i].nodeName == "LI"){
		uls.childNodes[i].style.background = "red"
	}
}*/
/*alert(uls.childNodes[0].nodeType);//返回节点类型元素1  文本3
for(var i = 0 ; i < uls.childNodes.length ; i++){
	if(uls.childNodes[i].nodeType == 1){
		uls.childNodes[i].style.background = "red"
	}
}*/
//节点属性 firstChild  lastChild

//var uls = document.getElementById("uls");
//alert(uls.firstChild); // text  = uls.childNodes[0]
//alert(uls.lastChild);
//uls.lastChild.style.background= "red";
//alert(uls.parentNode)
//案例
//1》给所有的a 加入onclick 事件
/*var oA = document.getElementsByTagName('a');
for(var i = 0 ; i < oA.length ;  i++){
	oA[i].onclick = function(){
		this.parentNode.style.display = "none";
	}
}
*/

/*var box = document.getElementById("box");
//alert(box.innerHTML)
//alert(box.nodeValue);//null
alert(box.childNodes[0].nodeValue)
*/
//节点方法
/*var imgs = document.getElementById("imgs");
//alert( imgs.getAttribute("id"))

var  box = document.getElementById("box");
//alert(box.getAttribute("style"))
imgs.setattribute("src","2.png");
imgs.removeAttribute("src");*/

//案例

/*var imgs = document.getElementById("imgs");
function fn(min,max){
	var str = Math.random()*(max - min)+min;
	return str;
}
setInterval(function(){
	imgs.setAttribute("style","width:"+fn(10,100)+"px;position: absolute; left: "+fn(0,1300)+"px;right:"+fn(0,650)+"px")

},500)*/
//创建节点
/*var oDiv = document.createElement("div");
document.body.appendChild(oDiv)//追加节点
var otxt = document.createTextNode("我是box");
var box = document.getElementById("box");
box.appendChild(otxt)*/
/*uls.insertBefore(box)
uls.removeChild(lis[1])*/
//简易留言板
/*var btn = document.getElementById("btn"),
	uls = document.getElementById("uls"),
	txt = document.getElementById("txt");
btn.onclick = function(){
	var lis = document.getElementsByTagName("li");
	//创建li元素节点
	var oLi = document.createElement("li");
	//放入ul元素节点
	uls.appendChild(oLi);//追加
//	uls.insertBefore(oLi,lis[0]);//前置
//	var t = document.createTextNode(txt.value)
	//把txt 的value 放入到节点中
//	oLi.appendChild(t)
	oLi.innerHTML = txt.value+" <a href = 'javascript:;'> 删除</a>";
	var oA = document.getElementsByTagName("a");
		for(var i = 0 ; i < oA.length ; i++){
			oA[i].onclick = function(){
			uls.removeChild(this.parentNode)
		}
	}
	
}
*/

//Dom 元素样式
//var box = document.getElementById("box");
//alert(box.style.width); //只能获取到元素样式
//alert(  getComputedStyle(box,null).width  ) ;//非IE 获取元素样式 这个是一个方法
//alert(   box.currentStyle.width  ) ; //IE8或以下版本 这个是属性

//处理兼容
/*function getAttr(dom,value){
	if(dom.currentStyle){ // 先IE 判断 再非IE   getComputedStyle(dom,null)
		return dom.currentStyle[value]
	}else{
		return getComputedStyle(dom,null)[value]
	}
}
alert( getAttr(box,"width") );
*/
//元素大小
/*var box = document.getElementById("box");
//alert(box.offsetWidth);//300  number
//写一个定时器 实现box每隔500毫秒box盒子增加10px
setInterval(function(){
	//box.style.width = box.offsetWidth-2+"px";
					//302 -2 = 300
					//302 -2 = 300
	box.style.width = parseInt(getAttr(box,"width")) -1+"px";
	
},50)

function getAttr(dom,value){
	if(dom.currentStyle){
		return dom.currentStyle[value] ;//IE
	}else{
		return getComputedStyle(dom,null)[value];//非IE
	}
}
*/
//元素偏移
/*var box = document.getElementById("box");
//alert("left  "+box.offsetLeft)
//alert("top   "+box.offsetTop)
var dv2 = document.getElementById("dv2");
alert(dv2.offsetLeft)*/
//滚动的距离
/*var btn = document.getElementById("btn");
btn.onclick = function(){
	alert(box.scrollLeft)
}
*/

//获取宽度和搞定(文档、可视区域)
//alert(document.documentElement.clientWidth)

//alert( document.body.clientWidth)

//alert(document.documentElement.clientHeight)

//alert(document.body.clientHeight)

//标准模式和混杂模式
var btn = document.getElementById("btn");
btn.onclick = function(){
//	alert( document.documentElement.scrollTop);
	alert(document.body.scrollTop);
var top  = document.body.scrollTop || document.documentElement.scrollTop;
//alert(top)
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" href="style.css" />-->
		<style>
			/**{margin:0;padding: 0;}*/
			/*#box{
				width:50px;
				height:70px;
				background:pink;
				overflow: scroll;*/
				/*border:1px solid #000;
				padding:10px;
				*/
				/*position: relative;
				margin: 50px;*/
			/*}*/
			/*#dv2{
				width:100px;
				height:100px;
				background:red;
				margin: 50px;
				position: absolute;
				left:50px;
				top:50px;
			}*/
		</style>
	</head>
	<body style="height: 2000px;">
		<input type="button" name="btn" id="btn" value="点击" />
		<!--<div id="box">
			<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
			<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
			<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
			<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>-->
			<!--<div id="dv2"></div>-->
		<!--</div>
		<input type="button" id="btn" value="滚动" />-->
			<script src="script.js"></script>
	</body>
</html>
<!--style="background: #000;"-->
		<!--轮播图-->
	<!--	<div id="container">
			<ul id="oul">
				<li><img src="images/1.jpg"/></li>
				<li><img src="images/2.jpg"/></li>
				<li><img src="images/3.jpg"/></li>
				<li><img src="images/1.jpg"/></li>
				<li><img src="images/2.jpg"/></li>
			</ul>
			<div id="left"></div>
			<div id="right"></div>
			
			<ol id="ool">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>-->
		
		<!--Dom树-->
		<!--<div id="box">
			<ul id="uls">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>-->
		<!--<ul>
			<li>1<a href="javascript:;">隐藏</a></li>
			<li>2<a href="javascript:;">隐藏</a></li>
			<li>3<a href="javascript:;">隐藏</a></li>
			<li>4<a href="javascript:;">隐藏</a></li>
			<li>5<a href="javascript:;">隐藏</a></li>
		</ul>-->
		<!--<div id="box">我是box</div>-->
		
		<!--<img  src="../04/00.png" id="imgs" />
		<div id="box" style="width:300px; height: 300px;margin: 0 auto;"></div>	
		-->
		<!--案例-->
		<!--<img src="../04/00.png" id="imgs"/>-->
		<!--<div  id="box"></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>-->
<!--<h1>简易留言板</h1>
		<input type="text" id="txt"/>
		<input type="button" value="留言" id="btn" />
		<div id="box">
			<ul id="uls">
				<a href=""
			</ul>
		</div>-->
		


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页