webAPI 基础知识点

最新推荐文章于 2022-05-19 14:22:49 发布

小鸟`~`愤飞

最新推荐文章于 2022-05-19 14:22:49 发布

阅读量815

点赞数 1

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/L_JH6666/article/details/121665157

版权

本文详细介绍了WebAPI中的DOM基础，包括根据id、标签、类名获取元素，querySelector与querySelectorAll的使用，以及元素内容、属性的操作。此外，还涉及事件基础、节点操作和事件加强等内容，是学习JavaScript Web开发的重要参考资料。

摘要由CSDN通过智能技术生成

一.简介

1.前端js的组成部分：ECMAScript(语法), DOM,BOM

2.API: application programming interface 应用程序接口

生活中的接口：如遥控器

程序中的接品：函数（我们学的内置对象函数就是接口），请求地址

3.webAPI: 网页API接口，浏览器给我们提供了一些函数，我们只需要用函数

二.DOM

1.什么是DOM: document Object Model 文档对象模型

2.DOM树：文档，元素，节点

1.获取元素

1.1根据 id 找元素 document.getElementById()

<div id="txt">我爱武汉热干面</div>
var txt = document.getElementById('txt')
console.log(txt);
console.dir(txt)

1.2根据标签名称找元素 document.getElementsByTagName()

返回值：伪数组（伪数组可以遍历，但是不能使用数组的内置方法）

注意事项：

1.即使标签只能匹配一个，也是长度为1的伪数组

2.即使标签没有匹配，也是长度为0的伪数组

3.getElementsByTagName可以使用父级元素调用

<ul id="ul">
<li>我是第1个li</li>
   <li>我是第2个li</li>
   <li>我是第3个li</li>
   <li>我是第4个li</li>
   <li>我是第5个li</li>
</ul>

var lis = document.getElementsByTagName("li");
console.log(lis);
//或
var ul = docuement.getElementById('ul')
var lis = ul.getElementsByTagName('li')
console.log(lis)

1.3根据类名称找元素 getElementsByClassName()

返回值：伪数组

<div class="txt">hello</div>
<div class="txt">world</div>

var txts = document.getElementsByClassName("txt")
console.log(txts)

1.4querySelector()与queryselectorAll()

1.querySelector(css选择器)

返回值：dom元素

注意事项：即使选择器能匹配多个，也只是返回匹配的第一个元素

2.querySelectorAll(css选择器)

返回值：伪数组

注意事项：即使选择器只能匹配1个，返回也是伪数组，伪数组中第一个元素就是匹配的dom对象

<ul id="ul">
<li>我是第1个li</li>
   <li>我是第2个li</li>
   <li>我是第3个li</li>
   <li>我是第4个li</li>
   <li>我是第5个li</li>
</ul>

var li = document.querySelector("li")
console.log(li) // <li>我是第1个li</li>

var uls = doucment.querySelectorAll("#ul")
consoe.log(uls) // [[ul对象]]
console.log(uls[0] === document.getElementById("ul")); //true

1.5两个特殊的标签的获取：body元素，html元素

body: document.body

html: document.documentElement

2.事件基础

事件的三要素：事件源，事件类型，事件处理函数

<button>点我</button>

// 事件源，事件类型，事件处理函数
var btn = document.querySelector("button")

btn.onclick = function(){
alert("我被点了")
}

3.操作元素内容

元素的内容：双边标签中间夹的部分，称为内容

innerHTML 与 innerText

3.1获取元素内容

<div>海绵宝宝的蟹黄堡</div>

// 1.获取内容
var div = document.querySelector("div");
console.log(div.innerHTML); //海绵宝宝的蟹黄堡
console.log(div.innerText); //海绵宝宝的蟹黄堡

3.2设置元素内容

<div>海绵宝宝的蟹黄堡</div>
<button id="btn1">Text修改</button>
<button id="btn2">HTML修改</button>

btn1.onclick = function(){
div.innerText = "海绵宝宝<span style='color:red;'>带着</span>派大星去抓水母" //原字符输入海绵宝宝<span style='color:red;'>带着</span>派大星去抓水母
}

btn2.onclick = function(){
div.innerHTML = "海绵宝宝<span style='color:red;'>带着</span>派大星去抓水母" //顺利两个字会变红海绵宝宝带着派大星去抓水母
}

总结：innerText与innerHTML的区别：页面不会渲染innerText字符，会渲染innerHTML字符

4.操作元素属性

元素属性： href src ...

4.1.设置元素的属性

<a href="http://www.baidu.com" target="_blank">百度</a>
<button>修改</button>

// 属性操作
var btn = document.querySelector("button");
var a = document.querySelector("a");

btn.onclick = function(){
a.href = "http://www.qq.com"
a.innerHTML = "QQ"
}

4.2.设置表单的属性

表单常见的属性：type value checked disabled selected

//案例1 修改下拉框的值并禁用按钮
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JAVASCRIPT</option>
</select>
<button>修改</button>

var btn = document.querySelector("button");
var sel = document.querySelector("select")

btn.onclick = function(){
sel.value = "js"
this.disabled = true
}

文本框密文明文切换案例

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

.box {
position: relative;
width: 400px;
margin: 150px auto;
border-bottom: 1px solid #ccc;
}

.box input {
height: 30px;
width: 370px;
border: 0;
outline: 0;
}

.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>

<body>
<div class="box">
<img src="./images/close.png" alt="">
<input type="password">
</div>

<script>
var eye = document.querySelector("img")
var input = document.querySelector("input");

var flag = false //false代表闭眼 true 代表睁眼
eye.onclick = function () {
if (flag == false) {
this.src = "./images/open.png"
input.type = "text"
flag = true
} else {
this.src = "./images/close.png"
input.type = "password"
flag = false
}
}
</script>
</body>

</html>

4.3.设置元素的style样式属性

本质上是在元素标签上添加style属性

注意在css中的'-'在js中变为了驼峰命名法。如：font-size => fontSize background-color => backgroundColor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>刘虎，你好吗</div>
<script>
var div = document.querySelector("div");
div.onmouseover = function(){
div.style.fontSize = "50px"
div.style.backgroundColor = "yellow"
}
</script>
</body>
</html>

4.4设置元素的class样式属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 200px;
height: 200px;
border:1px solid #ccc;
}
.b {
background-color: skyblue;
}
.c {
font-size: 50px;
}
</style>
</head>
<body>
<div class="a">class样式操作</div>