获取元素document.getElementById("元素名")
//根据id属性的值从文档中获取这个元素
var btnObj = document.getElementById("btn");
//给这个按钮对象注册一个点击事件 添加点击事件处理函数
btnObj.onclick = function(){
//响应
alert("弹框");
};
成对的标签都使用innerHTML来设置内容
- innerHTML innerText textConent innerHTML兼容性高 innerText在低版本的火狐中不支持 textConent 在ie8中不支持
<input type="btton" id="btn" value="改变p标签中的内容">
<p id="txt">改变p标签</p>
<script>
//通过id获取需要操作的这个元素 注册一个点击事件 添加事件的处理函数
document.getElementById("btn").onclick=function(){
//根据id来操作这个p标签 设置内容
//所有成对标签的都可以使用innerHTML来设置内容
document.getElementById("txt").innerHTML="这是一个p标签";
}
</script>
<input type="button" value="显示按钮" id="btn">
<div id="box">
<p>不要再犯困了</p>
<p>不要再犯困了</p>
</div>
<script>
document.getElementById("btn").onclick=function(){
//getElementsByTagName通过标签名字获得元素 返回的伪数组 [p,p]
var pobj= document.getElementById("box").getElementsByTagName("p");
for(var i=0;i<pobj.length;i++){
pobj[i].innerText="dsfc";
}
}
图片的alt属性的值是在图片损坏的时候出现 titile属性是鼠标移动到图片上时候出现的
<img src="image/71X58PICNjx_1024.jpg" alt="没显示 图片损坏" title="风景图"/>
/this在某个元素中代表的是这个元素（对象）或者谁调用了就代表谁
//this在某个元素中代表的是这个元素（对象）或者谁调用了就代表谁
<input type="button" value="按钮" id="btn" />
<script>
var btnObj= document.getElementById("btn");
btnObj.onclick=function(){
//在某个元素中 this代表的是当前的这个对象btnobj
this.value="大师傅";
this.type="text";
}
for循环一般都在页面加载的时候结完毕了 而事件一般都是调用的时候触发 For循环跳出后 i的值一般再加1 因为最后执行的i++后不满足条件跳出
- 排他功能
<input type="button" value="点击" />
<input type="button" value="点击" />
<input type="button" value="点击" />
<script>
var pobj = document.getElementsByTagName("input");
//这个是遍历每个input匀速并且注册一个点击事件
for(var i=0; i<pobj.length;i++){
pobj[i].onclick=function(){
//这次循环是当点击哪个input后 所有的input再次重新赋值
for(var j=0;j<pobj.length;j++){
pobj[j].value="没点击";
}
//之所以不写pobj[i]是因为会报错 undfined 跳出循环后 i就是pobj.length了
//索引都是从零开始的 所以没有这个索引 然后报错
this.value="点击";
}
}
表单中的属性 checked默认选中 readonly只读 disabled禁用 - -
- 一般属性的值是属性本身且只有一个 值可以使用布尔值代替 checked=true"
<script>
function f1(){
console.log("sfd");
console.log("sfd");
return ;//return 就是代码执行到return那结束 返回空就是false
console.log("sfd");//sfd sfd
}
f1();
</script>
<!-- a标签自带跳转就算href为空 也有跳转只不过是相当于锚点的跳转 -->
<a href="http://www.baidu.com" id="ann">百度</a>
<script>
document.getElementById("ann").onclick=function(){
alert("sa");
return false; //阻止跳转
}
根据表单id获取元素 一个返回值
var obj= documen.getelementsById("id属性值");
根据表单 name属性获取元素 多个返回值
var objs= documen.getelementsByName("name属性值");
根据类样式名字获取元素 多个返回值
var objs= documen.getelementsByClassName("类样式名字");
根据标签名字获取元素 多个返回值
var objs= documen.getelementsByTagName("标签名");
根据选择器获取元素 一个返回值
var obj= documen.querySeletor("选择器值");
根据选择器获取多个元素 多个返回值
var objs= documen.querySeletorAll("选择器值");
自定义属性
设置：元素.setAttribute("属性名"，"属性值");得到：元素.getAttribute("属性名");删除：元素.removeAttribute("属性名"，"属性值");
