IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JS基础知识整理2 -> 正文阅读

[JavaScript知识库]JS基础知识整理2

DOM

DOM : Document Object Model 文档对象模型
四类节点:

1.文档节点:整个HTML文档。
2.元素节点:HTML文档中的标签。
3.属性节点:元素的属性。
4.文本节点:标签中的文本。

查找节点

获取元素节点(document调用)

 1. getElementById()     通过id属性获取一个元素节点对象
 2. getElementsByTagName()     通过标签名来获取一组元素节点对象
 3. getElementsByName()     通过name属性获取一组元素节点对象
 4. getElementsByClassName()     根据class查找,IE8不兼容

获取节点的子节点(通过元素调用)

 1. getElementsByTagName()  返回当前节点的指定标签名后代节点
 2. childNodes   表示当前节点的所有子节点
 3. firstChild   表示当前节点的第一个子节点
 4. lastChild    表示当前节点的最后一个子节点

获取节点的父节点和兄弟节点(通过元素调用)

  1. parentNode    获取父节点
  2. previousSibling   获取前一个兄弟节点
  3. nextSibling    获取后一个兄弟节点

选择器字符串做参数查找节点

  1.document.querySelector()   参数为一个选择器字符串,可以根据css选择器来查询一个元素节点对象,但是只会返回第一个满足条件的元素。
  2.querySelectorAll()   返回所有符合条件的节点

创建节点

 1. 创建元素节点(例:创建 li 元素节点):
     var li = document.createElement(‘li’);
 2. 创建文本节点(例:创建 “广州” 文本节点):
     var testText = document.createTextNode(‘广州’);
 3. 将一个节点添加到另一个节点中(将文本节点添加到元素节点中):
     li.appendChild(testText);
 4.将一个节点插入到另一个节点前面:
     父节点.insertBefore(新节点,原子节点);

删除节点

 父节点.removeChild(要删除的节点);

替换节点

 父节点.replaceChild(新节点,原子节点);

用元素节点操作CSS

 修改元素样式:
      元素.style.样式名 = 样式值(样式值为字符串)
            例:box.style.width = '100px';
      如果CSS样式名中存在‘-’,则不合法,需要将其修改为驼峰命名法。
            例:box.style.backgroundColor = "red";

事件event

事件

 文档或浏览器窗口中发生的一些特定的交互瞬间。JS 与 HTML 之间的交互通过事件实现。

事件对象

 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。事件对象封装事件的一切相关信息。IE9以上浏览器及火狐、谷歌浏览器都用event,IE8及以下用window.event。为了兼容,一般都写为event = event || window.event;

绑定事件 :为元素绑定响应函数。

事件的冒泡Bubble

 指事件的向上传导,当后代元素绑定事件被触发时,其祖先元素的相同事件也会被触发。大部分有益,但是通过事件对象可以取消冒泡:event.cancelBubble = true;

事件的委派

 将事件绑定给元素的共同祖先元素,通过冒泡,使后代元素也都响应。

事件的绑定

 为事件绑定响应函数,只能绑定一个。
 同时为一个元素绑定多个响应函数:
         普通浏览器:addEventListener(事件的字符串(无on),回调函数,是否在捕获阶段触发事件(一般为false))
		 IE8及以下:attachEvent(事件的字符串(有on),回调函数),此函数执行顺序相反(从外向里触发)

事件的传播:

(IE8以下浏览器不适用)
  三个阶段:
  1. 捕获阶段   从外向里进行捕获,但是不会触发
  2. 目标阶段   捕获结束,触发事件
  3. 冒泡阶段   从里向外冒泡

BOM

BOM : Browser Object Model 浏览器对象模型,通过JS操作浏览器
BOM对象:

  1. Window     整个浏览器窗口
  2. Navigator  代表当前浏览器信息,通过它可以识别不同的浏览器
  3. Location   代表当前浏览器的地址栏信息
  4. History    浏览器历史记录(由于保护隐私,该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页,只在当次访问有效)
  5. Screen     用户的屏幕信息

定时器

方法:

1. setInterval(回调函数,调用时间间隔(单位为ms)) 定时调用,可以将一个函数每隔一段时间执行一次,可多次执行。返回Number类型数值。
2. clearInterval(定时器名称) 关闭定时器(可以接受任何类型)
3. setTimeOut() 延时调用,一个函数隔一段时间以后再调用,只执行一次
4. clearTimeOut() 关闭延时调用,用法与定时调用一样

JSON

JSON:JavaScript Object Notation JS对象表示法

1. JSON在开发中用来交互数据。
2. JSON字符串中属性名必须加双引号。
3. JSON是特殊格式的字符串,这个字符串可以被任何语言识别并且可以转换为任意	语言的对象。
4. JSON分类: 1.对象{} 2.数组[]
5. JSON中允许的值:字符串、数值、布尔值、null、对象(只能是普通对象)、数组
6. 方法:
     JSON.parse(JSON字符串)    将JSON转换为JS对象
     JSON.stringify()     将JS对象转换为JSON
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-09 16:11:30  更:2021-10-09 16:13:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/18 22:06:34-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码