Tres formas de obtener nodos
/*
获取节点三种方式:
1.根据id获取dom节点 （获取单个对象）
2.根据标签名获取dom节点(获取多个)
3.根据标签对应的name属性获取dom节点(获取多个)
*/
//window.onload 当页面内容渲染完毕之后，执行匿名函数中的内容
onload = function(){
//根据id获取dom节点
var mydiv = document.getElementById("mydiv");
//通过标签名获取dom节点(获取到多个节点)
var inputs = document.getElementsByTagName("input");
//通过属性名name获取dom节点(获取到多个节点)
var hobboys = document.getElementsByName("hobboy");
}
Métodos comunes para obtener el nodo raíz y el nodo del cuerpo y Math
//获取根节点
var rootEle = document.documentElement;
//通过根节点获取网页宽度；
var width=rootEle.clientWidth;
//获取网页的高度
var height=rootEle.clientHeight;
console.debug(width,height);
//获取body标签dom节点
var body=document.body;
/*获取随机数，0-1不包括1*/
var a=Math.random();
console.debug(a);
/*向上取整*/
var b=Math.ceil(a);
Ejemplo de Gophers
onload=function(){
setInterval(function(){
//创建节点img
var img=document.createElement("img");
//给img属性src赋值
img.src="img/ds.jpg";
//给图片添加样式 由于class是js保留字，所以用className
img.className="ds";
//获取根节点
var rootEle=document.documentElement;
//获取网页宽度
var width=rootEle.clientWidth;
//获取网页高度
var height=rootEle.clientHeight;
//随机的成横坐标
var w=Math.ceil(Math.random()*width);
//随机生成纵坐标
var h=Math.ceil(Math.random()*height);
console.debug(h);
//给img设置左端和上端距离
img.style.left=w+"px";
img.style.top=h+"px";
//给img设置一个点击事件，单击他就消失
img.onclick=function(){
//获取父节点
var parentNode=this.parentNode;
//移除子节点
parentNode.removeChild(this);
}
//获取body节点
var body=document.body;
//在body节点下创建img节点
body.appendChild(img);
},2000)
}
Operación de los atributos JS:
* Atributos incorporados: las herramientas ide han solicitado automáticamente que los atributos sean todos atributos incorporados
* Operar los atributos incorporados valor establecido: dom. Atributo = valor
* Obtener el valor del atributo incorporado: dom. Atributo
* Atributo personalizado: la herramienta ide no Los atributos que se solicitan automáticamente son todos atributos personalizados.
* Establezca el valor del atributo personalizado: dom.setAttribute ("nombre de atributo", valor);
* Obtenga el valor del atributo personalizado: dom.getAttribute ("nombre de atributo")
operación de atributo especial :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//是否禁用按钮注册事件
function disabledButton(){
var username = document.getElementById("username");
//如果是禁用状态，就把它改成不被禁用
/*
方式1：写法
if(username.disabled){
username.disabled = false;
}else{//否则禁用
username.disabled = true;
}
*/
/*
* 方式2:写法
* username.disabled = (username.disabled?false:true);
*/
/*方式3:写法*/
username.disabled = !username.disabled;
}
</script>
</head>
<body>
<input type="button" onclick="disabledButton()" value="是否禁用文本框" />
<input type="text" disabled="disabled" name="username" id="username" />
</body>
</html>
Manipulación de texto innerHTML y innerText
atributos relacionados con la manipulación de texto:
innerHTML: obtenga todos los valores en la
etiqueta especificada , establezca el valor en la etiqueta especificada (si el valor establecido tiene código html, puede ser analizado por el navegador)
innerText: obtenga el valor especificado Texto sin formato en la
etiqueta Establezca el valor en la etiqueta especificada (si el valor establecido tiene código html, el navegador no lo analizará y
solo se mostrará como texto sin formato)
onload = function(){
//获取div节点
var mydiv = document.getElementById("mydiv");
var html = mydiv.innerHTML;
console.debug(html);
console.debug("=======================================");
//设置指定标签中的值
mydiv.innerHTML = "<h2>你被我修改了</h2>";
console.debug("========================================");
console.debug(mydiv.innerText);//只会获取到纯文本
console.debug("========================================");
mydiv.innerText = "<h3>我只会当成一个纯文本进行展示</h3>";//设置指定标签中的值(只会当成文本展示)
}
Dos formas de tiempo de registro js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function btn1(){
alert("注册事件方式1");
}
window.onload = function(){
document.getElementById("btn2").onclick = function(){
alert("注册事件方式2")
}
}
</script>
</head>
<body>
<!--在html代码中注册事件，该事件对应的函数，必须写在script标签内部-->
<input type="button" value="提交1" onclick="btn1()" />
<!--注册事件方式2:使用dom来注册事件-->
<input type="button" value="提交2" id="btn2" />
</body>
</html>
