JS元素内容操作-CSDN博客

本文链接：https://blog.csdn.net/qq_39460362/article/details/89191906

js设置元素内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box"><span>hello world！！！</span></div>
		<button id="btn">点击按钮</button>
		<script type="text/javascript">
			//需求： 获取到id为box的div里面的内容
			//1 需要找到div   2.找到被点击的按钮    3.点击事件和btn要绑定
             var oBox = document.getElementById("box")
             var oBtn = document.getElementById("btn")
             //对象 .onclick = 事件处理函数
             
             oBtn.onclick = function (){
             	//弹出这哥box里面的内容
//           	oBox.innerHTML = "<span style="color:red">hello world！！！</span>
                 oBox.innerHTML = '<span style="color:red">我喜欢你你呀</span> '
//           	oBox.innerHTML = "我喜欢你"
//           	oBox.innerText = "<span style="color:red">情窦初开<span/>"
//           	alert(oBox.innerHTML)
             }
            
             //要产生交互  1.找到对象  2 要知道发生了什么事情  3 如何应对
		</script>
	</body>
</html>

js笔记

1.书写位置
a.内嵌到网页中，写在 script标签内部
b.写到外部js文件中，通过script的src属性引入
2.输入输出方式
a. alert（）弹窗
b. document.write（“这里写输出的内容”）输入到html body的内容中
c. console.log（“这里输出内容”）输出到浏览器的console窗口中
d. 输入的方式 prompt （“提示用户输入的内容”）
js需要区分大小写
注意加分号

4. 查找html元素
js可以去操作html元素，改变html元素的样式，首先你要找到它
var oBtn =document.getElementById("btn")
查找HTML元素

5. 函数是具有一定功能的代码块
6.
a. 用 function关键词定义函数格式固定 function后面是函数名（）{这里是代码块}
b. 函数定义好如何使用？用函数名（) 函数调用
c. 函数封装的好处：可以复用代码

7. 事件函数绑定胡擦出怎样的火花
我在马路上捡到一分钱？怎么办?
obtn.onclick = fn
当click上事件上发生了以后就会去调用fn并去执行
当在obtn身上发生了一个点击事件用函数fn 来处理

8. 事件函数绑定：
对象.事件 = function（）{
这里去坐具体的业务逻辑
}
一只傻瑞雯