JS基础二

DOM
Math 数学类（算术对象）
字符串

DOM

DOM 是 Document Object Model（文档对象模型）的缩写
它操作的顶级对象是document（文档对象）

DOM可以操作元素以及元素的内容、标签属性、文字、音频视频等等。（只要是直接写在文档中的，DOM都可以直接操作）

DOM可以描述每个元素之间的关系图谱，例如xxx的父元素，xxx的子元素...

通过DOM获取元素的方式

获取元素的范围.querySelector('value') 通过选择器获取元素
- 传入的value值与css选择器相同，可以写类、id、标签、后代选择器、子代选择器...
- IE低版本浏览器不兼容（IE低版本 67）
获取元素的范围.querySelectorAll('value') 获取这个名称的全部元素
document.getElementById('value')
- 通过id获取一个元素，获取元素范围只能是document
- 如果一个页面有多个id名称相同的元素，只获取第一个
- 在ie67中，会将表单元素的name属性值当做id名称来调取，并且不区分大小写
- 可以直接使用元素的id来调取（不推荐使用）
获取元素的范围.getElementsByClassName('list') 通过元素的类名获取一组元素（获取的是一个集合）
- 在ie67中元素身上没有这个属性或方法
- 如何获取这个集合中的某一个元素呢？通过[索引]的方式获取

var list=document.getElementsByClassName('list');// 获取到的是整个文档下所有的类名叫做list的元素
// 想获取这里面其中一个
var cur=list[0];// 获取到的是这个集合中的第一个元素
var cur1=list[1];// 获取到的是这个集合中的第二个元素

获取元素的范围.getElementsByTagName('a') 通过标签名获取一组元素
获取元素的范围.getElementsByName('value') 通过元素name属性的属性值获取一组元素，多用在表单元素身上
获取文档的根元素（rootelement）-- document.documentElement
获取body元素 -- document.body
获取当前页面的宽度和高度
- var width=document.documentElement.clientWidth||document.body.clientWidth
- var height=document.documentElement.clientHeight||document.body.clientHeight

DOM节点和关系属性

Node 在页面中出现的所有东西都是节点，元素、注释、文本等都是节点

获取指定元素下所有的子节点 xxx.childNodes
获取指定元素下所有的元素子节点 xxx.children
获取指定元素的父节点 xxx.parentNode
获取指定元素的上一个节点 xxx.previousSibling
获取指定元素的上一个元素节点 xxx.previousElementSibling 不兼容
获取指定元素的下一个节点 xxx.nextSibling
获取指定元素的下一个元素节点 xxx.nextElementSibling 不兼容
获取指定元素下的第一个节点 xxx.firstChild
获取指定元素下的第一个元素节点 xxx.firstElementChild
获取指定元素下的最后一个节点 xxx.lastChild
获取指定元素下的最后一个元素节点 xxx.lastElementChild

节点类型 nodeType nodeName nodeValue
元素节点（元素标签） 1 大写的标签名 null
文本节点（文字） 3 #text 文字内容
注释节点（注释） 8 #comment 注释内容
document（整个文档） 9 #document null

DOM的增删改查及应用

创建元素节点 document.createElement()
向指定元素所有内容之后添加一个元素节点 -- 父级对象.appendChild(新创建的元素节点)
向指定元素之前添加新创建的元素节点 -- parent.insertBefore(new,old)
删除创建的元素节点 -- parent.removeChild(要删除的节点);
克隆一份节点 -- 要克隆的节点对象.cloneNode(true)
- false（不填参数）默认只克隆当前元素，里面的内容不会复制
- true 将这个元素以及里面所有内容都克隆一份
替换 parent.replaceChild(替换的元素对象,被替换的元素对象)
setAttribute 创建属性节点会添加到元素的开始标签内

通过对象.属性名和对象['属性名']这两种方式,只有内置属性标签显示,自定义属性不会在标签显示

<p style=""></p>

getAttribute('属性名'); 获取属性节点

只能获取在HTML结构标签上的属性,通常setAttribute设置,跟getAttribute获取结合使用

removeAttribute('属性名') 删除属性节点

只能删除在HTML结构上的标签的属性

box.index=null假删除

Math 数学类（算术对象）

作用是：执行常见的算数任务

Math.abs() 取绝对值
Math.ceil()向上取整（出现小数点就向上＋1）
Math.floor()向下取整
Math.round()四舍五入
Math.max(val1,val2,val3...)取最大值
Math.min(val1,val2,val3...)取最小值
Math.random()获取[0-1)之间的随机小数（不包含1）
Math.round(Math.random()*(m-n)+n) 获取任意两个数之间的随机数

Math.round(Math.random()*(m-n)+n) 获取n-m之间的随机整数，包含n或m

+= 和 = 的区别
+= 是在原有的基础上进行累加
= 是重新赋值

字符串

String 对象用于处理已有的字符块（空格、换行也是字符）

字符串是由长度的

字符串类也是对象，也有属性名和属性值，他的属性名是当前字符的索引，索引从0开始，到length-1结束

获取指定位置的字符 charAt(索引) 返回值为当前索引对应的字符

var str="abcde";
var val=str.charAt(0);// "a"
// val用来接收返回值

字符串截取
- substr(n,m) 从索引n开始，截取m个字符

var str="abcde";
var val=str.substr(2,3);// "cde"

- substring(n,m)  从索引n开始截取到索引m，不包含m

var str="abcde";
var val=str.substring(2,3);// "c"

- slice(n,m)  从索引n开始截取到索引m，不包含m，但是此方法支持参数为负值
	- 支持负数作为索引（str.length+负数索引）

var str="abcde";
var val=str.slice(2,3);// "c"
var val1=str.slice(-3,-1);// "cd"

练习

从n项截取到m项应该怎么写（包含n和m）？？？？？？？(从第n个截取到第
第m个)  2,4
var str="abcdefg";
// a b c d e f g
// 0 1 2 3 4 5 6
// 1 2 3 4 5 6 7
str.slice(n-1,m)
str.substring(n-1,m)
str.substr(n-1,m-n+1)

查找指定字符所在字符串的索引值
- indexOf('指定的字符') -- > 返回值是该字符第一次出现位置的索引值
- lastIndexOf('指定的字符') -- > 返回值是该字符最后一次出现位置的索引值
- search('指定的字符') -- > 返回值是该字符第一次出现位置的索引值
- 如果没找到，说明该字符串没有这个字符，返回-1
- match('指定的字符') --> ["指定的字符", index: 0, input: "123"]，找不到返回null
将字符串中的字母转为大小写
- toLowerCase()转化为小写
- toUpperCase()转化为大写
replace(oldword,newword) 替换不会改变原字符串，返回一个修改后新的字符串
- 只能进行一次替换，如果后面还有相同的字符是不能替换后面的字符，只能替换第一次遇到的字符
将字符串按照指定分隔符产分成数组 split(分隔符)
- 分隔符不会出现在数组中

var str="abcd";
console.log(str.split("b"));// ["a","cd"]

- 不传入分隔符，会将字符串中每一个字符都分开

var str="abcd";
console.log(str.split(""));// ["a", "b", "c", "d"]

- 分隔符不存在与字符串中的时候，会将字符串当做数组中的一项

var str="abcd";
console.log(str.split("1"));// ["abcd"]