jscript DOM操作

\n 换行符 \b 空格 \r 回车 && 与 || 或 ! 非(取反)

classList属性

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

语法：element.classList

属性 :element.classList.lenght (返回类列表中类的数量该属性是只读的)

方法:

element.classList.lenght.add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

element.classList.lenght.remove( String [,String] )删除指定的类值。item ( Number )按集合中的索引返回类值。

element.classList.lenght.toggle ( String [, force] )当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

element.classList.lenght.contains( String )检查元素的类属性中是否存在指定的类值。

element.classList.lenght.replace( oldClass, newClass )用一个新类替换已有类。

element.classList.lenght.item(index) 返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null

alert() 用浏览器提示框显示信息 (消息弹出框)

prompt( ) 用浏览器对话框，接收用户输入的提示信息 (信息输入框)

console.log() 用浏览器控制台显示信息

isNaN()方法判断一个变量是否为非数值是数值返回false 不是返回true

(typeof 变量) 可以用来获取变量的数据类型

parseInt(); 数字转整数

parseFloat()数字浮点小数

变量.toFixed( 要保留几位 )四舍五入为指定小数保留个数（添加几保留几位）

Object{} 对象

indexOf() 可以返回某个字符串的值在字符串首次出现的位置

delete 对象.键名删除对象的属性和方法

对象.length 获取对象的长度

for in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for(var key in 对象){

//key 是对象中的每一个键

//对象[key];

}

var 变量 = new Date() 获取当前时间

对象.hasOwnProperty('键') 检查一个对象中是否存在某个属性或方法、返回布尔值

对象 instanceOf 构造函数名 | 监测对象类型检测一个对象的数据类型

Math.abs() 获取一个对象的绝对值

Math.round() 四舍五入

Math.PI π

Math.ceil() 向上取整

Math.floor() 向下取整

Math.random() 随机数 (随机生成0 ~1之间的数)

Math.max() 求几个数的最大数

Math.min() 求几个数的最小数

switch( 结果表达式 ){// 多条件查询 ( 等值判断是用 )

case value1 : //表达式结果等于 value1 时要执行的代码

break;

default: //表达式结果不等于任何一个 value 时要执行的代码

}

while 语句就是当条件满足时重复执行相同的代码；

do..while 最少会执行一次循环的代码。

continue 立即跳出本次循环，继续下一次循环

break 退出整个循环开始执行循环后面的代码

return 关键字可以终止函数的执行可以将数据返回给调用者，调用者可以用变量接收函数返回的结果

数组(Array)

创建数组 : var arr = new Array( ) 通过构造函数创造数组

var arr = [ ] 通过字面量创造数组

变量课访问的范围是作用域

全局作用域是函数之外的执行环境

局部作用域只能在本函数中使用

数组名.unshift(要添加的项，多个) 在数组开始位置添加

数组名.push(添加的项，可多个) 在数组结束位置添加（常用）

数组名.shift() 删除并返回数组的第一个元素（删除第一个）

数组名.pop() 删除并返回数组的最后一个元素（删除最后一个）

数组名.splice(索引,删除的个数,替换项) 从数组中添加、删除任意位置

数组名.indexOf('要查询的东西') 从前向后查询|不存在返回-1

数组名.lastIndexOf('要查询的东西') 从后向前查询|不存在放回-1

数组名.reverse() 颠倒数组中元素顺序

数组名.sort(function(a,b){return a-b}); 从小到大排列

数组名.sort(function(a,b){return b-a}); 从大到小排列

数组名.slice（索引，个数）截取 ①索引 ② 截取的个数

数组名.join('')数组拼接 ('')添字符 (把数组转换成字符串)[用于把数组中的所有元素放入一个字符串]

字符串.split() （把字符串转换成数组） [用于把一个字符串分割成字符串数组]

数组名.forEach(function(a,b,c){}) 遍历 a:遍历内容 b:所在位置 c:这个数组

数组名.filter(function(a,b,c){ return 条件}) 过滤出符合条件的元素用新变量接收

数组名.every(function(a,b){return 条件}) 验证数组中的每个元素是否都符合指定条件，返回布尔值

数组名.some(function(a,b){return 条件}) 验证数组中的每个元素是否都符合指定条件，返回布尔值

数组.map(function(a,b){return 操作}) 遍历数组中每一个元素，更改后存入一个新的数组中返回新数组

数组名=[] 清空数组

数组名.length = 0; 清空数组

string字符串对象

字符串.charAt(数字) 那个字符在这个位置

字符串[索引] 获取字符串中的单个字符

拼接字符串记得用 + 拼接符

字符串.concat(要拼接的字符串)

字符串slice(开始位置,结束位置) 截取

查询字符是否在字符串中

字符串.indexOf('要查询的字符') 返回所在位置从前向后查询

字符串.lastIndexOf('要查询的内容') 返回所在位置从后向前查询

字符串.trim() 去掉字符串前后的空格

字符串.toUpperCase() 字符串转成大写

字符串.toLowerCase() 字符串转成小写

字符串.replace(①,②) 字符串替换 ①原来的②要替换的

字符串.split('要拿出的相同字符')字符串分割把字符串分割成数组

时间

var 变量 = new Date() 获取当前时间

24小时制

获取（get）

日期对象.getFullYear() 年

日期对象.getMonth() 月 // 注意：获取月份是从0开始的

日期对象.getDate() 日

日期对象.getHours() 时

日期对象.getMinutes() 分

日期对象.getSeconds() 秒

对象.getMilliseconds() 毫秒

对象.getDay(); 0-6(星期日到星期六)

对象.getTime();

设置（set）

日期对象.setFullYear(数字)

日期对象.setMonth(数字)

注意：获取月份是从0开始的

日期对象.setDate(数字)

日期对象.setHours(数字)时

日期对象.setMinutes(数字) 分

日期对象.getSeconds() 秒

对象.setMilliseconds(数字)毫秒

对象.setTime(数字);

12小时制的样式

时间对象.toLocaleString() // 获取当前时间例如样式: 2018/5/14 上午11:12:22

时间对象.toLocaleDateString() // 获取当前年/月/日

时间对象.toLocaleTimeString() // 获取当前时:分:秒 12小时值得例如样式:上午 11:22:22

【var dt = new Date();

const 变量名 = (dt.getMonth()+' ').padStart(2,'0') 这样自动会把时间前面的0补齐

padStart( ) ：第一个参数表示: 长度第二个参数表示: 前面要用什么补齐

padEnd( ) ：第一个参数表示:长度读儿歌参数表示: 向后要用什么补齐】

WebAPI获取元素节点的方法

document.getElementById() 获取标签在的ID

document.getElementsByTayName() 获取标签名

document.getElementdByClassName()获取标签类名

document.getElementsByName() 根据标签的name值获取一组节点对象。返回一个伪数组

document.querySelector()[0] 根据选择器获取【单个节点对象】。返回一个节点对象（ID记得加 # 类名加 .）

document.querySelectorAll() 根据标签的name值获取【一组节点对象】。返回一个伪数组

操作元素

元素.innerHTML = '可以填写内容和标签'；

元素.className = 类名；添加或删除类名

元素.innerText='只可以填写内容'; 添加标签会被一起打印到页面

操作表单属性

元素.value 获取文本框的内容（所有表单都可以用）

元素.value ='' 设置文本框的内容

元素.cheked 操作表单元素是否选中【针对单选框和多选框选择=true】

元素.disabled 操作表单元素是否禁止(针对按钮禁用=true)

元素.selected 操作下拉框选项是否选中【针对下拉框】

元素.readOnly 操作表单元素是否只读【针对文本框】

什么是自定义属性

针对html标签的属性可以分为两类：

标签自带属性（语言设计者提供的属性）id、title、src、href、name、type等

自定义标签属性用户根据需求，自己给标签添加的自己定义的标签属性

操作方式

获取节点对象.getAttribute('属性名'); // 会返回标签的属性的值

设置节点对象.setAttribute('属性名','值'); // 会修改或添加标签属性

删除节点对象.removeAttribute('属性名'); // 会删除标签的属性

注意：自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。不能直接通过元素点的方式直接获取或设置

操作元素的样式【重要】

通过元素的style属性操作

var box = document.getElementById('box');

box.style.width = '100px'; // 设置元素的宽度

box.style.height = '100px'; // 设置元素的高度

box.style.backgroundColor = 'red'; // 设置元素的颜色 // css→ background-color js→ backgroundColor

注意：通过样式属性设置宽高、位置的属性类型是字符串，需要加上px。

通过设置元素的className属性操作

var box = document.getElementById('box');box.className = 'aa bb'; // 设置box.className.replace('aa','AA'); // 替换

小结：元素的style属性适合操作单个样式，而元素className适合操作一组样式

根据节点之间关系获取节点

获取父节点

元素节点.parentNode作用：获取一个节点的父节点

获取子节点

节点.childNodes 获取一个节点的所有子节点(包括文本节点和元素节点),返回一个有序的集合

节点.children 获取一个节点的所有子节点（仅仅是元素节点）

获取第一个节点

父节点.firstChild 获取第一个子节点对象,包含空白(空格)文本节点对象

父节点.firstElementChild 获取第一个元素子节点对象有兼容问题(IE9以下)

获取最后一个子节点

父节点.lastChild 获取最后一个子节点对象,包含空白文本(空格)节点对象

父节点.lastElementChild 获取最后一个元素子节点对象，有兼容问题IE9以下

获取上一个兄弟节点

节点.previousSibling; 获取上一个同级的节点，包含空白文本节点对象

节点.previousElementSibling; 获取上一个同级的元素节点，有兼容问题IE9以下

获取下一个

节点.nextSibling;获取下一个同级的节点，包含空白文本(空格)节点对象

节点.nextElementSibling; 获取下一个同级的元素节点，有兼容问题IE9以下

创建元素

document.write('内容') 缺点会覆盖整个页面一般不用

元素.innerHTML ='内容'优点:对于添加多个嵌套的内容操作方便。缺点:会覆盖部分网页元素以及事件

document.createElement('标签名') 优点：不会覆盖原有的元素的事件。缺点：对于添加嵌套多的内容操作麻烦。(只是标签名字不用加<> 如加 <div>标签直接写成document.createElement(‘div’) 就可以 )

创建元素性能问题【了解】

innerHTML 会产生字符串解析，由于字符串的不可变性，尽量避免大量的拼接，否则消耗内存，影响性能。

document.createElement('标签')创建的性能要比innerHTML要高，但是若涉及到多层嵌套内容时，代码操作麻烦。

所以，一般情况下,两者配合使用较多

添加元素

父节点.appendChild(新的子节点);作用：向父节点最后追加新的节点

父节点.insertBefore(新的节点,旧的子节点) 将一个新的节点插入到父节点中的某个子节点的前面

删除元素

父节点.removeChild(子节点) 作用：删除父元素中的指定的子节点

替换元素

父节点.replaceChild(新的节点,旧的子节点) 作用：替换子节点

基本动画【一】 (tab 切换用)

动画显示

元素.show([speed],[callback])

参数:① speed ，可选，表示动画执行时长，数字表示毫秒。也可用字符串 slow(600)、normal(400)、fast(200)。