一.概念
JavaScript分为三部分
ECMAScript 标准:js的基本语法,提供了核心的功能和基础
DOM: Document Object Model 文档对象模型,一个页面就是一个文档对象,可以用来操作页面的元素
BOM: Browser Object Model 浏览器对象模型(Browser浏览器的意思),用来操作浏览器的一些功能
文档 一个页面就是一个文档,编程时用文档对象document来表示html 页面的根标签,也叫根元素
元素 element,页面中所有的标签都是元素
节点 node,页面中所有的内容都是节点,包括标签,属性,文本DOM 又称文档树模型
二.getElementById
因为页面是从上往下加载的,需要将操作的标签写在对应脚本的前面
使用文档对象document调用,根据元素id查找标签的方法getElementById("id名称")
使用上一步找到标签对象,绑定其单击事件
<input type="button" value="点击我" onclick="f1()"><br>
<input type="button" value="点击我" id="btn2">
<script>
function f1(){
alert("Hello World");
}
function f2(){
alert("你好,世界");
}
btn.onclick =f2;//这里不要加括号,加括号后就是执行后的结果
</script>
可以直接给onclick()添加函数,但是不建议这样写,推荐将html和js分离
使用 getElementById("id名称") 方法,通过这个方法获取到对象给其添加点击事件onclick,可以使用匿名函数,注意使用有名称的函数的时候 对象.onclick = 函数名;
(注意不要加上括号,加上括号就是执行后的结果)
绑定匿名函数
<input type="button" value="点击我" id="btn">
<script>
var btn =document.getElementById("btn");
btn.onclick =function (){
alert("你好,世界");
}
</script>
改变图片,只需要修改图片的src即可
也可以在script标签中设置图片的样式
例如
var img1 =document.getElementById("img1");
img1.style.width ="300px";
img1.style.height ="300px";
修改文本属性用innerText
document.getElementById("p2").innerText = "文本内容";
改变超链接
<input type="button" value="点击我" id="btn1">
<a href="https://www.qq.com" id="a1" target="_blank">腾讯</a>
<script>
document.getElementById("btn1").onclick =function (){
document.getElementById("a1").href ="https://www.baidu.com";
document.getElementById("a1").innerText ="百度";
}
根据标签名获取元素document.getElementsByTagName
使用document.getElementsByTagName("标签名称"),获取的是一个对象数组,数组是有下标的,可以使用下标来进行处理
innerText和innerHTML之间的区别
innerText中只能放文本,即使赋值的时候字符串中包含HTML标签,也不会解析成HTML标签,仅仅当做普通文本处理
innerHTML中可以使用HTML标签,赋值的时候字符串中包含字符串标签,会解析为对应的HTML标签
修改文本获取内容
根据getElementsByTagName("input ")获取到所有的input
如果有的类型不想选择,需要进行类型判断 获取的数组.type = "button"
修改当前标签
在某个元素的事件中,自己事件中的this就是当前这个元素对象
鼠标进入和离开事件
鼠标进入这个对象区域是触发事件: onmouseenter
当鼠标离开这个对象区域时触发事件: onmouseleave
改变图片
通过getElementById("元素")获取到元素,修改其src
display none 元素不显示,不占页面空间
在script标签中要写 对象.style.display = "none"; (不显示)
对象.style.display = "block"; (显示)
切换隐藏和显示
两个按钮
一个按钮控制
控制灯泡开关的案例
没有按钮,可以自己设置一个变量来控制
获取元素的其他方法:
1.根据id获取元素,返回唯一的一个元素对象
document.getElementById(" ")
2.根据元素名称获取,返回的是一个标签对象数组
document.getElementsByTagName(" ")
3.根据类名获取指定的元素,有兼容性问题,ie9以下不支持这个功能
document.getElementsByClassName(" ")
4.根据name属性获取对应的元素
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<script>
var names =document.getElementsByName("gender");
console.log(names)
</script>
