javaScript中的DOM

首先整理了一下前面的API:

arr.sort( );比较两个值大小的函数,可以对数组做升降序处理。

arr.reverse( );翻转,可以用来颠倒数组元素,但不负责排序。

arr.push( );在数组的最后追加元素。

arr.pop( );删除数组的最后一个元素。

arr.shift( );删除数组开头的第一个元素,并返回第一个元素。

arr.unshift( );在数组的开头添加元素。

arr.join("自定义的连接符");--------arr.join("")无缝连接。

arr.slice(starti,endi+1); 选取starti位置到endi位置的所有元素,组成临时数组。

arr.splice(starti,n,value1,value2,);删除arr中starti开始的n个元素,插入value1,value2。

arr.concat(value1,value2,value3,arr1........)拼接到arr的结尾。

str.subStr(starti,n);选取starti开始的n个元素,n可以省略,表示截取starti开始到所有元素。

str.subString(starti,endi+1);选取starti到endi+1的元素,含头不含尾。

str.replace(/正则表达式/gi,"替换值");替换。

str.split(/正则/);切割。

检索关键词四种:

str.indexOf("关键词");查找的是第一次出现的位置,没找到返回-1。

str.search(/正则/); 忽略大小写的匹配---/正则/i。

str.match(/正则/gi); 默认只找一个,g表示找所有。

reg.exec( );

判断:

arr.every( ) :判断arr中每个元素是否都符合要求,只有每一个元素都符合要求的时候,才返回true;只要有一个元素不符合条件,就返回false。类似 &&

arr.some( ) :判断arr中是否包含符合要求的元素,只要有一个元素符合条件,就返回true;除非所有的元素都不符合条件,才返回false。类似 ||

语法:

var bool = arr.every(function(val,i,arr){

var 自动获取当前元素值

i 自动获取当前元素的位置

arr 自动获取当前数组

return 条件;

})

遍历:

arr.forEach( ) :对原数组中每个元素执行相同的操作,直接操作的原数组

语法:

arr.forEach(function(val,i,arr){执行的相同操作 arr[i] = newValue})

arr.map( ) :取出原数组中的值,加工后,放入新数组

语法:

var newArr = arr.map(function(var,i,arr){

return newValue;

})

过滤和汇总:

过滤:选取原数组中符合条件的元素组成新数组

语法:var subArr = arr.filter(function(val,i,arr){

return 条件 ;

}) ----所有返回true的元素,收集到新数组中

汇总:对数组中每个元素的值最终统计一个新的结果

语法:var result = arr.reduce(function(prev,val,i,arr){

prev 获得截止目前的统计结果

return prev + val;

start : 累积数量的起始值

}[,start]);

Math.ceil(num) 向上取整,取num的下一个整数。

Math.floor(num) 向下取整,省略小数部分。

Math.floor("12.5px")==>Math.floor(Number(12.5px))==>Math.floor(NaN)==>NaN。

Math.round(num) 四舍五入取整 缺点:只能取整。

Math.random() 随机生成一个整数(0-n)。

Math.pow(底数,幂) 乘方

Math.sprt(n) 开平方

Math.max(10,10,20,30) 最大值

Math.min(10,10,20,30) 最小值

内置对象11个:

Number String Boolean

Array Date RegExp Math

Error

Function Object 级别较高的对象,往往是父对象

Global / window浏览器中用来替换Global

一.DOM Tree (节点树)

1.getElementById方法定义在Document.prototype上,即Element节点上不能使用。

2.getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(xml document,Element)

3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上

                            getElementsByTagName(*)

4.HTMLDocument.prototype定义了一些常用的属性,body,head,分别指代HTML文档中的<body><head>标签。

         document.body

         document.head

5.Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代<html>元素

         document.documentElement   代表html文档

6.getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义

二.按照HTML查找

按照HTML查找 在整个页面或者父元素下,查找属性或标签符合条件的元素对象有4种:

1.id 只能用document调用 仅返回一个元素

    var div = document.getElementById("box");

     console.log(div);

 2.tagName 查找指定父元素下的指定标签元素 任何父元素都可以调用

   返回值哪怕只有哦一个,也放在集合中 没有找到符合要求的子节点 返回一个空数组

   查找不仅只查直接子节点,而且查找所有子代节点

   var divs = document.getElementsByTagName("div");

  var aLinks = div.getElementsByTagName("a");

  console.log(document.getElementsByTagName("span"));

  console.log(document.getElementsByTagName("p"));

 3.name属性查找 查找表单 只能用document调用 返回:动态数组

  var form1 = document.getElementById("form1");

  var chks = document.getElementsByName("sex");

 4.按class属性查找 只能通过任意父元素上调用 查找的子代 只要标签中class属性值符合要求的就被选中

  var lis = nav.getElementsByClassName("active");

 DOM的一些API:

核心DOM:可以操作一切结构文档API,访问标准的HTML属性

获取属性值:

aLink.getAttribute("href");

修改属性值:

aLink.setAttribute("href","bailiban.com");

判断是否包含指定属性 一定是在html标签中有设置的属性

var bool = aLink.hasAttribute("traget");

移除属性--属性名和属性值一起移除

aLink.removeAttribute("title");

HTML DOM :对核心DOM中常用的API的简化

一切HTML标准属性都被HTML DOM封装到元素对象中

获取属性值:

aLink.href;

修改属性值:

aLink.href = "bailiban.com";

判断是否包含指定属性,所有的标准属性都封装在对象中,如果没有设置值,返回的“ ”

var bool = aLink.traget =="";

移除属性,只移除了属性

aLink.title = "";

注意:class因为和ES中的class属性冲突,html中的class改名为className

特殊:状态属性 disabled selected checked

不用核心DOM操作,用HTML DOM 打点操作

attribute vs preoperty 属性

attribute 指出现在开始标签中的属性

property 保存在内存中的对象中的属性

核心DOM只能操作出现在页面上的attribute属性,无法操作未出现在页面上,存在内存中的property属性

追加:父元素的结尾添加新元素

parent.appendChild(elem);

插入:在现有子元素之前插入新元素

parent.insertBefore(elem,oldElem)

替换:替换现有子元素

parent.repalaceChild(elem,oldElem)

原文地址:https://www.cnblogs.com/hyh888/p/11368926.html