获取节点的三种方式
/*
获取节点三种方式:
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");
}
获取根节点和body节点和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);
打地鼠例子
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)
}
JS属性的操作:
* 内置属性:ide工具有自动提示的属性都是内置属性
* 操作内置属性设置值: dom.属性 = 值
* 获取内置属性的值: dom.属性
* 自定义属性: ide工具没有自动提示的属性都是自定义属性
* 操作自定义属性设置值: dom.setAttribute(“属性名”,值);
* 获取自定义属性的值: dom.getAttribute(“属性名”)
特殊属性的操作:
<!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>
文本操作innerHTML和innerText
文本操作相关的属性:
innerHTML:获取指定标签中所有的值,
设置指定标签中的值(如果设置的值有html代码,它是能被浏览器所解析的)
innerText:获取指定标签中的纯文本
设置指定标签中的值(如果设置的值有html代码,它是不会被浏览器所解析的,
只会当成一个纯文本进行展示)
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>";//设置指定标签中的值(只会当成文本展示)
}
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>