JavaScript(WebAPI)

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(函数名,间隔时间)

写的是函数名不加()

<script>
    let i = 10;

function fn() {
    // 使用正确的模板字符串语法
    document.write(`${i}`);
    i--;
}
// 每隔1秒执行一次fn函数
 setInterval(fn, 1000);
</script>

 关闭定时器

let 变量名=setInterval(函数名,间隔时间);

clearInterval(变量名)

 let i = 10;

 function fn() {

     document.write(`${i}`);
     if(i==0){
        clearInterval(n);
     }
     else{
        i--;
     }
    }
    let n=setInterval(fn,1000);

使用匿名函数

  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