DOM基础、定时器、BOM基础

DOM基础

DOM节点介绍
子节点

节点的分类

文本节点

元素节点

获取子节点的方法

oParentNode.childNodes,返回一个数组,包含父节点中的所有文本节点和元素节点

通过nodeType属性来判断节点的类型,1为元素节点,3为文本节点

oParentNode.children,返回一个数组, 包含父节点中的所有元素节点

父节点

oNode.parentNode,子节点的父节点对象

oNode.offsetParent,子节点绝对定位时,获取参考的父节点对象

隐藏父元素案例

首尾子节点

firstChild, firstElementChild

lastChild, lastElementChild

兄弟节点

nextSibling,nextElementSibling

previousSibling,previousElementSibling

操作属性

获取属性的值:getAttribute(名称),有属性获取值,没有属性返回null

设置属性:setAttribute(名称,值)

删除属性:removeAttribute(名称)

通过类名获取元素集合

封装函数

创建元素

document.createElement(‘标签名’)

追加元素

parentNode.appendChild(node)

插入元素

parentNode.insertBefore(node1,node2),在node2之前插入node1

删除元素

parentNode.removeChild(node)

删除父元素案例

DOM 应用

获取表格元素

隔行变色案例

添加删除行

搜索内容

toLowerCase()

search

split

按内容排序### 定时器
setInterval(fn,时间) 开启循环型定时器
setTimeout(fn,时间) 开启延迟型定时器
clearInterval(定时器) 关闭循环型定时器
clearTimeout(定时器) 关闭延迟型定时器
注意点:

循环型定时器在定时器关闭前会一直按照设定的间隔时间执行,延迟型定时器只执行一次

定时器中指定的时间指的是该时间后把代码加入到执行队列中,如果队列空闲就立即执行

案例1:数码时钟

系统时间对象 Date,方法 getHours、getMinutes、getSeconds,getFullYear(),getMonth(),getDate(),getDay()

字符串的charAt方法

window对象

window代表一个浏览器对象
window对象是一个全局对象,因此在全局作用域中声明的变量函数会变成window对象的属性和方法

window.open()

打开一个新窗口并返回新打开的窗口对象

window.open(“about:blank”,"_blank");
window.open(“about:blank”);
window.open(“about:blank”,"_self");
window.open(“http://www.kuazhu.com”);

window.close()

不能关闭用户打开的窗口

window.navigator.userAgent

当前浏览器的信息

window.location

当前页面的相关信息对象,可以读取和赋值
document.loaction和window.location是同一个对象
window.location.href 属性代表当前页面的完整url
window.location.assign(url),assign方法会打开url,如果把location.href或者location设置为一个url值,也会调用assign方法
location的其他属性

host
hostname
pathname
port
search

window.histroy

用户上网的记录,从窗口被打开的那一刻算起
history.go(-1) == history.back()
history.go(1) == history.forward()

交互

var res = prompt(“请输入你的姓名？”);

var res = confirm(“你确定删除吗?”);

DOM基础、定时器、BOM基础相关推荐

Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
dom刷新局部元素_JavaScript中DOM和BOM基础
BOM部分基础内容 BOM(Broswer Object Model)浏览器对象模型 ,主要用来获取或设置浏览器的属性.行为 ; 使JavaScript可以和浏览器进行交互 ; window 是 BO ...
STM32基础定时器详解
目录 01.定时器介绍 02.时钟源 03.时基单元 04.计数模式 4.1.向上计数模式 4.2.向下计数模式 4.3.中央对齐(向上/向下计数模式) 05.基础定时代码定时器最基本的功能就是定时 ...
电机控制基础——定时器基础知识与PWM输出原理
单片机开发中,电机的控制与定时器有着密不可分的关系,无论是直流电机,步进电机还是舵机,都会用到定时器,比如最常用的有刷直流电机,会使用定时器产生PWM波来调节转速,通过定时器的正交编码器接口来测量转速 ...
【STM32H7教程】第63章 STM32H7的高分辨率定时器HRTIM基础知识和HAL库API
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第63章 STM32H7的高分辨率定时器HRTIM ...
电机控制基础——定时器编码器模式使用与转速计算
上篇电机控制基础--定时器捕获单输入脉冲原理介绍了定时器捕获输入脉冲的原理,那种方式是根据捕获的原理,手动切换上升沿与下降沿捕获,计算脉冲宽度的过程原理比较清晰,但编程操作起来比较麻烦. 对于电机测速 ...
web前端—前端三剑客之JS(13)：BOM基础、浏览器窗口
菜鸟教程:https://www.runoob.com/js/js-window.html BOM基础 BOM(browser Object Model)是浏览器对象模型.在浏览器中window就是B ...
基础知识 | BOM 事件
BOM简介 Browser Object Model 浏览器对象模型,专门操作浏览器窗口或软件的一套对象和方法的集合 BOM没有标准,所以有兼容性问题 BOM比Dom更大,它包含Dom,documne ...
JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...

DOM基础、定时器、BOM基础

DOM基础

DOM 应用

window对象

window.open()

window.close()

window.navigator.userAgent

window.location

window.histroy

交互

DOM基础、定时器、BOM基础相关推荐

最新文章

热门文章