Javascript notas de estudio (DOM, objetos de lista de materiales)

DOM (Document Object Model) objetos

objeto DOM es un modelo de objetos de documento define un método estándar para acceder y manipular documentos HTML, el documento HTML DOM presenta como una estructura con elementos, atributos, y el texto, y su estructura es similar a una estructura de árbol.
En el modelo DOM, todas las páginas de contenido son considerados como un objeto, etiquetas, atributos, texto, y así sucesivamente.
Cuando el navegador carga la página, el navegador crea un objeto de documento (es decir, objetos DOM) de la página actual, después de que todos los nodos pueden acceder a la página web de objetos DOM.

El objeto de página web se analiza en un nodo DOM como sigue
Aquí Insertar imagen Descripción

nodo de elemento: figura anterior elementos de nodo <html>, <body>, <p>, <a> etc. Estas etiquetas son.
Los nodos de texto: el contenido de la página muestran el título del título, texto etiquetas <p> y así sucesivamente y así sucesivamente contenido de texto CSS.
Atributo nodo: atributo nodo llamado un nodo de atributo elemento, atributo href de la etiqueta de <a>, <input> valor de la propiedad tag y similares.

el funcionamiento del nodo

Obtener el código HTML en los nodos de objetos DOM


 //通过元素节点id获取节点
 document.getElementById();

 //通过结点的tag名称获取节点
 document.getElementsByTagName();
 
 //通过节点的名称获取，返回一个同样节点名称的数组
 document.getElementsByName();

Obtener nodo padre por elementos de nodo (nodo existente nodeObj)

nodeObj.firstChild: Si el nodo es el primer nodo hijo del nodo actual puede utilizar este método. Esta propiedad puede ser implementada de forma recursiva, el acceso al primer nodo hijo del nodo padre puede seguir obteniendo un primer nodo hijo usando el nodo hijo, nodeObj.firstChild.firstChild.firstChild ... formulario.
nodeObj.lastChild: nodos Obviamente, esta propiedad es conocida adquiridos (parentObj) del último hijo, armarios utilizados para obtener el primer nodo de la misma manera.
nodeObj.childNodes: Obtiene una matriz de todos los nodos nodos secundarios conocidos, a continuación, la matriz se puede procesar (bucle a través para encontrar el nodo deseado).
nodeObj.children: Consigue conocido nodo hijo directo de la matriz de nodo, por tratamiento después.
nodeObj.getElementsByTagName (): todos los sub-tipo del nodo especificado de valor de matriz secundarios del nodo actual

Obtener el elemento nodo hermano (nodo nodeObj existente)

nodeObj.nextSibling: obtener la siguiente hermano
nodeObj.previousSibling: obtener la última hermanos

Obtener el elemento nodo hermano (nodo nodeObj existente)

nodeObj.parentNode: darse a conocer el padre del nodo

La creación de nodos

nodo de elemento: document.createElement (tagName);
nodo de texto: document.createTextNode (texto);
Propiedad: node.setAttribute (nombre, valor);

nodos adicionales (parentNode padre)

parentNode.appendChild (nodo hijo);
parentNode.insertBefore (nodo_nuevo, oldnode),
parentNode.replaceChild (nodo_nuevo, oldnode);

La duplicación y el nodo deleción (el nodo se copia nodo copyNode / matriz de la parentNode)

copyNode.cloneNode (verdadero / falso)

copia profunda es cierto, el nodo y todos los nodos hijos son todos replicación
copia falsa como una luz: copias sólo el nodo actual (incluyendo atributos)
parentNode.removeChild (parámetros)

operaciones de propiedad

Obtiene el nodo de valor de la propiedad

itnode: Nombre del atributo
itnode.getAttribute (nombre de la propiedad)

valores de los atributos conjunto de nodos

1.itnode. Nombre de atributo = valor de atributo conjunto

2.itnode.setAttribute (nombre, valor);

//代码中只演示了部分操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js练习</title>
		
		<script type="text/javascript">
			
			function funt1(){
				// 1.獲取元素结点
				var code1 = document.getElementById('demo1')
				// 2.对该结点进行操作
				code1.style.backgroundColor = 'blueviolet';
				// code1.style.size = 20px;
			}
			
			// document.getElementsByTagName(tag标签名称); 
			function funt2(){
				// 1.获取元素结点
				var code2 = document.getElementsByTagName('li');
				// 访问具体元素结点
				code2[0].style.backgroundColor = 'red';
				code2.item(1).style.backgroundColor = 'yellow';
			}
			
			// document.getElementsByName(name属性值);
			function funt3(){
				var code3 = document.getElementsByName('demo3');
				code3.item(0).style.fontSize = '25px';
				code3[0].style.backgroundColor = 'green';
			}
			
			// innnerHTML
			function funt4(){
				// 获取div结点
				var code4 = document.getElementById('demo4');
				// 重新设置一个html属性
				code4.innerHTML = '<h2>那都不是事..........</h2>';
			}
			
			function funt5(){
				// 获取li对象
				var code5 = document.getElementsByTagName('li');
				var one_code = code5[0];
				// 找出第一个li的下一个<li>
				one_code.nextElementSibling.style.backgroundColor = 'red';
				// 找出第二个li的上一个li
				var two_code = code5[1];
				two_code.previousSibling.style.fontSize = '50px';
			}
			
			function funt6(){
				// 获取结点
				var code6 = document.getElementsByTagName('li');
				var one_code1 = code6[0];
				one_code1.parentNode.style.fontSize = '50px';
			}
			
			function funt7(){
				var code7 = document.getElementsByTagName('a')[0];
				console.log(code7);
				console.log('链接'+code7.href);
				console.log('提交方式'+code7.method)
			}
		</script>
	</head>
	<body>
		<!--<di v id="demo1">窗前明月光</div>
		<div id="">意识地上霜</div>
		<input type="button" value="获取结点" onclick="funt1()" />
		 -->
		<!-- 
		<div>
			<ul>
				<li>如果努力有用的话</li>
				<li>还要天才干什么？</li>
				<li>...........</li>
			</ul>
			<input type="button" value="点我点我" onclick="funt2()" />
		</div>
	 -->
		<!-- 
	 <ul>
		 <li name='demo3'>窗前明月光</li>
		 <li nmae='demo3'>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
 -->	 
		<!-- 
	<div id="demo4"></div>
	<p>>>>>>>>:</p>
	<input type="button" value="点我点我" onclick="funt4()" />
	 -->
	 
	 
	 <ul>
		 <li>床前明月光</li>
		 <li>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
	 
	 <a href="www.baidu.com">百度</a>
	 <a href="www.taobao.com">淘宝</a>
	 <input type="button" value="点我点我" onclick="funt7()" />
	</body>
</html>

BOM (Browser Object Model) objetos

Navegador de modelo de objetos de confiar en el objeto ventana representa la ventana del navegador y la página de área visible.

objeto de la ventana

window.alert) (
cuadro emergente de advertencia
window.confirm) (
cuadro emergente de confirmación
window.prompt ()
cuadro de entrada popup
window.open ( "dirección URL", "_ negro o _self", "tamaño de la nueva ventana")
para abrir una nueva ventana
close ()
Cierra la página actual

Temporizadores, desp

setTimeout (función, tiempo)
Timer
setInterval (función, tiempo)
de retardo
clearTimeout (valor del temporizador volvió)
Clear temporizadores

El objeto ubicación

location.herf = 'dirección de Internet'
Devuelve el nombre de host del servidor y número de puerto
Devuelve el nombre del archivo y la ruta de acceso de directorio
Devuelve el puerto especificado el número de puerto en la URL, tales como el número de puerto no incluye la URL devuelve una cadena vacía
portocol Volver al protocolo utilizado, http: / https:

objetos Navigator
- ver la información de versión del navegador

objetos de la pantalla

altura: drogarse toda la pantalla.
Ancho: obtener todo el ancho de la pantalla.
availHeight: Alto Alto restando la totalidad de los componentes del sistema de pantalla
availWidth: Anchura Anchura de los componentes del sistema restando toda la pantalla


//对上述的部分对象属性方法进行使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3</title>
		<!-- 作业三：将作业1，2合并为一到题。计数器数字能被3整除变换背景颜色，数字能被8整除自动打开页面，页面计数到5自动关闭页面 -->
		<script type="text/javascript">
			
			// 定义一个计数器的初始值
			var initial=0;
			// 计数器计数函数
			function start_count() {
				// 获取input对象
				var input_obj = document.getElementById('count');
				// 通过对象获取input对象的value属性
				input_obj.value = '该计数器的值是'+initial;
				// 计数+1
				initial=initial+1;
				// 判断当计数器的值为30时弹出窗口自动关闭网页(自己加了一个提示网页关闭的弹窗)
				if (initial % 3 == 0){
					setTimeout('funt_color()',1000);
					setTimeout("start_count()",1000);
				}else if(initial % 8 == 0){
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
				}else if (initial % 3 ==0 && initial % 8 == 0){
					setTimeout('funt_color()',1000);
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
					console.log('你好啊..........')
				}else{
					setTimeout('start_count()',1000);
				}
			}  
			
			//定义一个打开页面的函数
			function open_win(){
				// 新窗口的url
				var win_url = '';
				// 窗口名称
				var win_name = 'window新窗口'
				// 新窗口的属性值
				var win_width = 600;
				var win_height = 400;
				var screen_width = screen.width;
				var screen_height = screen.height;
				var x = (screen_width-win_width)/2;
				var y = (screen_height-win_height)/2-50;
				var options = "width="+win_width+",height="+win_height+",left="+x+",top="+y;
				win_obj = window.open(win_url,win_name,options);
				//新窗口在5秒钟后，自动关闭
				win_obj.setTimeout("window.close()",5000);
			} 
			
			var color_str = '#';
			// 定义随机背景函数
			function funt_color(){
				/*随机产生十六进制的颜色值*/
				var arr_color = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
				// 循环从列表中拿取6次，取到6个不同的值
				for(var i = 0; i < 6; i++)
				{
					// 产生一个1---------16之间的整数，作为下标，去数组中取值
					var random_color = Math.floor(Math.random()*16);
					// 产生的随机数*16,所以取不到0，所以随机数-1
					color_str += arr_color[random_color-1];
				}
				// 将rgb颜色表示弹出来
				// document.write('<h3 style="text-align: center;">16进制颜色表示为:'+color_str+'</h3>');
				// 设置背景
				document.body.bgColor = color_str;
			}
			  
		</script>
	
		<!-- 计数器显示的input框的样式 -->
		<style type="text/css">
			input {
				width: 200px;
				height: 50px;
				text-align: center;
				font-size: 20px;
				line-height: 50px;
				margin: 50px 42%;
			}
		</style>
	</head>
	<!-- 给body绑定网页打开自动触发函数 -->
	<body onload="start_count()">
		<input type="button" id="count" value="该计数器的值是0"/>
	</body>
</html>

once Dian

Publicado 63 artículos originales · ganado elogios 1 · vistas 2033

carta privada preocupaciones