1.DOM对象
一个页面的结构是一个树形结构,称为DOM树
文档:一个页面就是一个文档,document
元素:页面中的所有标签成为元素,element
节点:网页中所有内容都可以成为节点(标签节点,注释节点,属性节点),node
DOM API:操作页面结构
BOM API:操作浏览器
2.获取元素 querySelector/querySelectorAll
类似于css选择器的功能
其他获取DOM元素方式
1)通过id获取
document.getElementById(' ');
2)通过标签名获取
document.getElementsByTagName(' ');
3)根据类名获取
document.getElementsByClassName(' ');
3.事件
用户对页面的一些操作(点击,修改,选择)会在浏览器中产生一个个事件,被JS获取到,从而进行更复杂的交互操作
1)点击事件
2)键盘按下事件
4.操作元素
1)获取/修改元素内容
innerText 将文本内容添加/更新到指定位置,显示纯文本,不解析标签
innerHTML将文本内容添加/更新到指定位置.解析标签
2))获取/修改元素属性
对象.属性=值 img.src="..";
对象.style.样式属性=值
const box=document.querySelector('.box');
box.style,backgroundColor='blue';
表单对象.属性=值
uname.value="123";
password.type="text";
5.定时器(间歇函数)
每隔一段时间自动执行一段代码,间隔时间单位是毫秒
setInterval(函数名,间隔时间)
写的是函数名不加()
html
<script>
let i = 10;
function fn() {
// 使用正确的模板字符串语法
document.write(`${i}`);
i--;
}
// 每隔1秒执行一次fn函数
setInterval(fn, 1000);
</script>
关闭定时器
let 变量名=setInterval(函数名,间隔时间);
clearInterval(变量名)
html
let i = 10;
function fn() {
document.write(`${i}`);
if(i==0){
clearInterval(n);
}
else{
i--;
}
}
let n=setInterval(fn,1000);
使用匿名函数
html
setInterval(function(){
document.write("haha");
},1000);
${i}
是 JavaScript 中模板字符串(Template Literals)的一部分。模板字符串允许你在字符串中嵌入表达式,包括变量和其他函数的结果等。这种语法在 ES6(ECMAScript 6)中被引入,使得字符串拼接更加简洁和易读。
在模板字符串中,反引号(`````)用来代替传统的单引号(' ')或双引号(" ")。要嵌入一个表达式,你可以使用 ${expression}
这样的语法,其中的 expression
可以是任何有效的 JavaScript 表达式。
下面是一个简单的例子:
let name = "Alice";
console.log(`Hello, ${name}!`); // 输出: Hello, Alice!
在这个例子中,${name}
被替换成了变量 name
的值。模板字符串也可以嵌套表达式,例如数学运算:
let num1 = 5;
let num2 = 3;
console.log(`The sum of ${num1} and ${num2} is ${num1 + num2}.`); // 输出: The sum of 5