c1认证（web进阶篇）

最新推荐文章于 2024-05-06 11:11:18 发布

小白村第一深情

最新推荐文章于 2024-05-06 11:11:18 发布

阅读量608

点赞数

分类专栏： c认证文章标签：前端 c1认证 javascript

本文链接：https://blog.csdn.net/ceike/article/details/126181543

版权

c认证专栏收录该内容

7 篇文章 0 订阅

订阅专栏

目录

文章目录、

前言

一、DOM节点操作

常用的节点属性获取方式

二、DOM交互（增删改）

1、DOM修改

2、DOM添加

3、DOM删除

3.dom控制css

1、通过style属性控制样式

2、通过classList控制样式

补充

4.节点写入

5.事件

2、事件绑定

6.鼠标和键盘事件

1、常用鼠标事件

2、常用键盘事件

3、常用键盘事件属性

7.窗口事件（*）

常用鼠标事件

8.BOM window对象

1、BOM结构

2、window对象

3、location对象

4、history对象

5、navigator对象

6、screen对象

9.定时器

1、定时器方法

总结

文章目录、

前言

一、DOM节点操作

`getElementById()`	获取带有指定id的节点
`getElementsByTagName()`	获取带有指定标签名的节点集合
`querySelector()`	获取指定选择器或选择器组匹配的第一个节点
`querySelectorAll()`	获取指定选择器或选择器组匹配的所有节点集合

innerHTML	返回元素内包含的所有HTML内容（文本和标签），类型为字符串
parentNode	返回指定节点的父节点
children	返回指定元素的子元素节点集合
firstElementChild	返回指定元素的第一个子元素节点
lastElementChild	返回指定元素的最后一个子元素节点

常用的节点属性获取方式

名称	描述
`getAttribute()`	返回元素一个指定的属性值
直接使用属性名称获取	适用于部分属性（如：`title`，`value`，`href`）

二、DOM交互（增删改）

1、DOM修改

名称	描述
`innerHTML`	`innerHTML`除了获取元素内容，也可通过赋值用于修改元素中内容。如果修改内容中包含`html字符串`会被解析成`html元素`
`setAttribute(name,value)`	设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
通过属性名更改属性	对元素属性重新赋值可更改对应属性值

2、DOM添加

名称	描述
`createElement(tagName)`	创建一个由标签名称`tagName`指定的HTML元素
`appendChild(node)`	将一个节点插入到指定父节点的子节点列表的末尾处
`insertAdjacentHTML(position, text)`	将指定文本解析为HTML字符串，插入到指定位置（IE不友好）

2.3 insertAdjacentHTML(position, text)代码示例

position（内容相对当前元素位置）：
- 'beforebegin'：元素自身的前面
- 'afterbegin'：插入元素内部的第一个子节点之前
- 'beforeend'：插入元素内部的最后一个子节点之后
- 'afterend'：元素自身的后面

3、DOM删除

名称	描述
`removeChild(child)`	删除选定的子节点，需要指定其父元素
`remove()`	删除选定节点（IE不友好）

3.dom控制css

1、通过style属性控制样式

style属性可以设置或返回元素的内联样式

语法：element.style.property = value
property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。

var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色 
box.style.marginLeft = "100px" // 将元素左外边距设置为100px

2、通过classList控制样式

classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的

classList常用方法介绍

名称	描述
`add(class1, class2, …)`	添加一个或多个类名
`remove(class1, class2, …)`	移除一个或多个类名
`replace(oldClass, newClass)`	替换类名
`contains(class)`	判定类名是否存在，返回布尔值
`toggle(class, true\|false)`	如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（`true`）或删除（`false`）

补充

对于更改同一个元素的同一种样式，style属性的优先级要高于classList。

4.节点写入

名称	描述
`innerHTML`	返回元素中的`html内容`，通过赋值，可设置元素中的`html内容`
`innerText`	返回元素中的文本内容，通过赋值，可设置元素中的文本内容
`document.write()`	将`html字符串`写入到文档中

5.事件

1.1 事件定义

用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情

事件举例：鼠标单击，双击，键盘输入，页面或图像载入

1.2 事件三要素（事件源，事件，事件处理程序）

事件源：谁触发的，一般指某个元素节点
事件：怎么触发的
事件处理程序：触发后发生了什么事

2、事件绑定

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

2.1 方式一：行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2.2 方式二：事件属性赋值

var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

2.3 方式三：事件监听

addEventListener(type, listener, useCapture)

type: 事件类型
listener: 监听器（处理程序）
useCapture: 默认为false，设置为true时，不会因冒泡触发监听器

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

事件属性赋值与事件监听区别：

事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；

6.鼠标和键盘事件

1、常用鼠标事件

名称	描述
`click`	单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
`contextmenu`	右键点击（右键菜单显示前触发）
`dblclick`	双击左键触发
`mouseenter`	指针移至元素范围内触发一次
`mouseleave`	指针移出元素范围外触发一次
`mouseover`	指针移至元素或其子元素内，可能触发多次
`mouseout`	指针移出元素，或者移至其子元素内，可能触发多次

2、常用键盘事件

名称	描述
`keydown`	按下任意按键，按住可连续触发
`keypress`	按下按键（`包括字母，文字和Enter`）触发，按住可连续触发，不能监听一些特殊按键（`ALT、CTRL、SHIFT、ESC、方向键等`）
`keyup`	释放任意按键

3、常用键盘事件属性

使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发

名称	描述
`keyCode`	`keyCode`属性返回`keypress`事件触发的键的值的字符代码，或者`keydown`或`keyup`事件的键盘代码。字符代码 - 表示`ASCII`字符的数字键盘代码 - 表示键盘上真实键的数字
`charCode`	返回`keypress`事件触发时按下的字符键的字符Unicode值，用于`keydown`或`keyup`时总是返回`0`
`key`	返回按键的标识符(字母区分大小写)。`keypress`，`keyup`，`keydown`返回值相同

7.窗口事件（*）

常用鼠标事件

名称	描述
`load`	当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件
`beforeunload`	window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框
`resize`	窗口大小改变时触发
`scroll`	元素内发生滚动时触发

8.BOM window对象

1、BOM结构

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

2、window对象

名称	描述
`open()`	打开一个新浏览器窗口
`alert()`	显示警告框
`close()`	关闭当前浏览器窗口
`scrollTo()`	可把内容滑动到指定坐标
`scrollBy()`	可将内容滑动指定的距离（相对于当前位置）
`innerWidth`	返回窗口的网页显示区域宽度
`innerHeight`	返回窗口的网页显示区域高度

2.1 open(url, name, features, replace)

url: 打开指定页面的url，如果没有则打开空白页
- name: 指定target属性或窗口名称，支持以下值：
  - _blank –- url加载到新窗口（默认）
  - _parent –- url加载到父框架
  - _self –- url替换当前页面
  - _top –- url替换任何可加载的框架集
  - name -- 窗口名称
features: 设置新打开窗口的功能样式（如：width=500）
replace
- true –- url替换浏览历史中的当前条目
- false –- 在浏览历史中创建新条目
  
  2.2 scrollTo(xpos, ypos)
- xpos：距离网页左上角x坐标
- ypos：距离网页左上角y坐标

3、location对象

location对象包含当前url信息，经常用于网址判断，url跳转

名称	描述
`href`	返回当前完整网址
`host`	返回主机名和端口号，通常指完整域名
`protocol`	返回网址协议
`port`	返回端口号
`pathname`	返回网址路径部分
`search`	返回网址中的?及?后的字符串（查询部分），通常指查询参数
`hash`	返回网址中的#及#后的字符串，通常指锚点名称
`assign(url)`	在当前页面打开指定新url（增加浏览记录）
`reload()`	重新加载当前页面
`replace(url)`	打开新url替换当前页面（替换当前浏览记录）

3.1 获取网址信息

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)

// “https://www.csdn.net/nav/python?param1=111&param2=222#first” 
console.log(location.host)        // “www.csdn.net”

console.log(location.protocol)    // “https://”

console.log(location.pathname)  // “/nav/python”

console.log(location.search)     // “?param1=111&param2=222”

console.log(location.hash)       // “#first”

3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url

location.href = 'https://www.csdn.net'

4、history对象

history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转

名称	描述	示例
`back()`	返回历史记录的上一个url	`history.back()`
`forward()`	返回历史记录的下一个url	`history.forward()`
`go(n)`	返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页	`history.go(-1)` `history.go(1)`

5、navigator对象

navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性

名称	描述
`platform`	返回操作系统类型
`userAgent`	返回用户代理头的值

判断是否为谷歌内核：

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

6、screen对象

screen对象包含用户屏幕的信息

名称	描述
`availWidth`	返回屏幕的宽度（不包括windows任务栏）
`availHeight`	返回屏幕的高度（不包括windows任务栏）
`width`	返回屏幕的总宽度
`height`	返回屏幕的总高度

9.定时器

1、定时器方法

方法名	定义	清除定时器方法
`setTimeout()`	指定的毫秒数后调用函数或计算表达式	`clearTimeout()`
`setInterval()`	按照指定的周期（毫秒）来调用函数或计算表达式	`clearInterval()`

1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)

setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;

定时器到期时，可以通过setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;

定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;

示例：

<p class="info"></p>
<button class="btn">清除定时器</button>
<script>
  var info = document.querySelector('.info')
  var btn = document.querySelector('.btn')
  var t1 = setTimeout(function() {
    info.innerHTML = '已经5秒了'
  }, 5000);
  // 点击按钮可清除定时器
  var btn = document.querySelector('.btn')
  btn.addEventListener('click', function() {
    clearTimeout(t1)
    info.innerHTML = '定时器已清除'
  })
</script>

1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)

语法与setTimeout()相似，区别是setInterval()第二个参数为运行间隔;

由于setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;

示例：

<p class="info"></p>
<script>
  var info = document.querySelector('.info')
  var num = 0
  var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止
    info.innerHTML = '当前时间：' + String(new Date())
    if (num >= 4) { clear() }
    num++
  }, 1000)
  // 清除定时器
  function clear() {
    clearInterval(t1)
    info.innerHTML = '定时器已清除'
  }
</script>

总结

其实学习开发web前端也有半年了，经过这次专业认证学习，发现自己的不足之处比自己想象中的要多的多；也意识到，了解，熟悉，与精通之间的差距；这一周多的时间里，让我受益和感触最深的就是，用马云先生的一句话:"因小而美，因小而伟大"；

The best asset you have is that you are young. Don't complain. Let the other people complain. The opportunity lie, always lies where people complain.年轻就是你所拥有的最棒的资产，不要抱怨，让其他人去抱怨，机会都在人们的抱怨里。 ——马云

小白村第一深情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
c1认证（web进阶篇）

其实学习开发web前端也有半年了，经过这次专业认证学习，发现自己的不足之处比自己想象中的要多的多；也意识到，了解，熟悉，与精通之间的差距；这一周多的时间里，让我受益和感触最深的就是，用马云先生的一句话:"因小而美，因小而伟大"； The best asset you have is that you are young. Don't complain. Let the other people complain. The opportunity lie, always lies where p....
复制链接

扫一扫