JS基础二
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"]
