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"]
posted @ 2017-06-26 14:31  和盛商行  阅读(160)  评论(0编辑  收藏  举报