zoukankan      html  css  js  c++  java
  • 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)

  • 相关阅读:
    ETL概念集锦
    想要快速泡大麦茶的4种方法
    Suggest blowing out the dust
    Pessimistic and optimistic locking
    操作系统简介
    初学计算机基础
    JavaScript筑基篇(三)->JS原型和原型链的理解
    网页瀑布流效果实现的几种方式
    javascript的基本语法、数据结构
    javascript如何列出全局对象的非原生属性。
  • 原文地址:https://www.cnblogs.com/hyh888/p/11368926.html
Copyright © 2011-2022 走看看