WebAPI-CSDN博客

本文链接：https://blog.csdn.net/m0_71988036/article/details/125492635

1. API和WebAPI

1.1 API

应用程序接口

1.2WebAPI

是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM)

2.DOM

2.1 DOM简介

文档对象模型.是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程语言

2.2DOM树

2.2.1文档

一个页面就是一个文档,DOM中使用document表示

2.2.2元素

页面中每一个标签都是一个元素 ,DOM中使用element表示

2.2.3节点

网页中所有的内容都可以看成一个节点 ,DOm中使用过node表示

注意 : DOM把以上都看成是对象

3.获取元素

3.1根据 Id的获取

使用etElementById()方法获取带Id的元素对象

<body>
  
  <div id='one'>键盘敲乱,工资过万</div>
  

<script>

  let box = document.getElementById('one');

   console.log(box);

 </script>

</body>

3.2根据标签名获取

使用getElementsTagName()方法可以返回带有指定标签名的对象的集合

<body>

  <ul>

    <li> 一起去大草原和湖边 1 </li>
    <li> 一起去大草原和湖边 2 </li>
    <li> 一起去大草原和湖边 3 </li>
    <li> 一起去大草原和湖边 4 </li>
    <li> 一起去大草原和湖边 5 </li>
  
 </ul>


<script>
    
   // 返回的是  获取过来元素对象的集合 以伪数组的形式存储的
  let lis = document.getElementTagName('li');
      console.log (lis);

  // 想要依次打印里面的元素对象可以采用遍历的方法
  
  for(let i = 0; i < lis.length; i++) {
    console.log (lis[i]);
}

</script>

</body>

3.3根据HTML5新增方法获取

3.3.1 getElementsByName()

根据类名获取元素集合

3.3.2document.querySelector()

根据指定的选择器返回一个元素对象

3.3.3document.queryselectorAll()

返回指定选择器的所有元素对象集合

<body>
<div class = 'box'>盒子1</div>
<div class = 'box'>盒子2</div>

<ul id ='nav'>

  <li>首页</li>
  <li>产品</li>

</ul>

<script>

// getElementsByClassName 根据类名获取元素的集合
 
  let boxs = document.getElementsByClassName('box');
    console.log(boxs);
//  querySselector  返回指定选择器的第一个对象  切记里面的选择器需要加符号

  let nav = document.querySelector('#nav');
    console.log(nav);

// querySelectorAll 返回指定选择器所有对象的集合

 let lis = document.querySelectorAll('li');
 console.log(lis);
</script>
</body>

4.获取特殊元素

4.1获取body元素

<body>

<script>
// 获取body元素

let bodyEle = docuument.body;
console.log(bodyEle);

</script>

</body>

4.2获取html元素

<script>

// 获取HTML元素

 let htmlEle = document.documentElement;
 console.log(htmlEle);

</script>

5.设置/修改DOM元素内容

5.1 利用document.write() 方法

<script>

document.write('你好');

</script>

5.1.1注意点

只能将内容追加到</body>前面的位置 ;

文本中包含的标签会被解析

5.2 元素.innerText属性

<body>

<div> 花海</div>

<script>

// 1.获取元素(标签)

 let box = document.querySlelctor('div');

// 2. 修改内容

box.innerText = '多远都要在一起';

</script>

</body>

5.2.2注意点

将文本内容添加到/更新到任意位置

文本中包含的标签不会被解析

5.3元素.innerHTML属性

<body>

 <div>十年</div>
<script>

// 1. 获取元素(标签)

let box = document.querySleector('div');

// 2. 修改内容

box.innerHTML = '<h4>演员</h4>';

</script>

</body>

5.3.1注意点

文本中包含的标签会被解析

6.设置/修改DOM元素属性

<body>

<img src= '../images/1.jpg' alt =''>;

<script>

// 1.获取元素

let pic = document.querySelector('img');

// 2. 修改元素

pic.src = '../images/2.jpg';

</script>

</body>

7.设置/修改DOM元素样式属性

7.1通过style控制元素样式属性

<head>
<style>
div{
 width:  300px;
 height: 300px;
 background-color: red;
}
</style>

</head>

<body>
<div>起风了</div>

<script>
// 1. 获取元素(标签)
let box = document.querySelector('div');

// 2. 修改样式

box.style.width = '400px';
box.style.height = '400px';
box.style.backgroundColor = 'blue';

</script>

</body>

7.1.1注意点

修改样式通过style引出 ;

如果属性有连接符(例 : background-color)用xiaotuofengminming法 ;

赋值不要忘记添加单位

7.2使用className控制元素样式属性

<head>
<style>
div {
 width: 300px;
height: 300px;
background-color: red;
 }
.one {
width: 400px;
height:400px;
background-color: blue;
}
</style>
</head>

<body>
<div>刚刚好</div>

<script>

// 1. 获取元素(标签)
let box = document.querySelector('div');
// 2. 修改样式
box.className = 'one';
</script>

</body>

7.2.1注意

由于class是关键字,所以用className代替 ;

直接使用className赋值会覆盖以前的类名;

7.3使用classList控制元素样式属性

7.3.1追加一个类

语法: 元素.classList.add('类名')

7.3.2删除一个类

语法: 元素.classList.remove('类名')

7.3.3切换一个类

语法: 元素.classList.toggle('类名')

<head>
<style>
div {
 width: 200px;
 heigth: 200px;
background-color: red;
}
.box {
width: 300px;
heigth: 300px;
background-color:blue;
}
</style>
</head>
<body>
<div class = 'one'> 意外</div>
<script>

// 1.获取元素(标签)
let box = document.querySelector('div');

// 2.修改样式
// add 是一个方法 追加 /添加
box.classList.add('box');
// remove 删除 移除
box.classList.remove('one');
// toggle 切换一个类
box.classList.toggle('one');