Javascript三大块
- ECMAScript标准:JS的基本语法
- DOM:文档对象模型—操作页面元素
- BOM:浏览器对象模型----操作的是浏览器
DOM对象
html文件看成是一个文档,那么这个文档看成是一个对象,
页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
- 标签可以嵌套,标签中有标签,元素中有元素
为元素注册事件
// 方式一:js代码和html代码未分离,没办法写太多JS代码
<!DOCTTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="点击查看效果" onclick="alert('我被你点了')"/>
</body>
</html>
// 方式二:js代码和html代码未分离,但是可以写很多js代码的做法
<script>
function f() {
alert('我被你点了');
..........
.........函数中可以写很多代码
}
</script>
<input type="button" value="点击查看效果" onclick="f()">
// 方式三:实现js代码和html代码分离
<script>
function f() {
alert('我被你点了');
..........
.........函数中可以写很多代码
}
</script>
<input type="button" value="点击查看效果" id="btn">
var btnObj=document.getElementById("btn");
btnObj.onclick=f;
DOM经常进行的操作
- 获取元素
- 动态创建元素
- 对元素进行操作(设置其属性或调用其方法)
- 事件(什么时机做相应的操作)
标签操作案例总结
- 凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
- getElementsByTagName(“标签的名字”);返回的是一个伪数组,可通过for遍历,可以批量为元素绑定事件
document.getElementById("btn").onclick=function () {
var pObjs= document.getElementsByTagName("p");
for(var i=0;i<pObjs.length;i++){
//每个p标签,设置文字
pObjs[i].innerText="我们都是p";
}
};
3、在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
4、批量绑定事件和排他功能实现(充分利用了以上2和3点的知识)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs[i].onclick = function () {
//把所有的按钮的value值设置为默认的值:没怀孕
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
}
//当前被点击的按钮设置为:怀孕了
this.value = "怀孕了";
};
}
5、封装获取元素对象操作
function my$ ( id ) {
return document.getElementById( id);
}
// 调用
my$ (" btn ").onclick=function() {
......语句体
};
6、凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
比如:background-color ===>backgroundColor