zoukankan      html  css  js  c++  java
  • JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)

    文本对象document

    例如:document.getElementById()    只获取一个对象

             document.getElementsByTagName()   获取对象伪数组

             document.getElementsByClassName() 获取对象伪数组,存在兼容问题

             document.createElement()   创建元素

    只有document具备write属性

    页面对象:document.body    获取body标签对象

    document.head   获取head标签对象

    document.title   获取title标签的内容

    document.documentElement   获取html标签对象

    对象属性的查询

    console.dir( obj )

    阻止<a></a>标签的默认行为

    <a href="http://www.baidu.com" onclick="return false">阻止a标签跳转</a>

    伪数组

    例如:var divs = document.getElementsByTagName("div")

    不具备数组的类似join、pop等操作数组的方法,但是具备索引和length

    真数组的展开形式如下:

     

    函数基本介绍

    1)函数的声明、预解析、赋值、调用

    function fn1 (a , b) { } 函数声明提升直接完成声明、预解析和变量赋值

    var fn2 = function (a , b) { } 变量声明提升,预解析过程只识别变量fn2,但没有赋值

    函数的调用:fn1 ( ); 调用后,即可执行函数内部的代码

    2)函数的作用域

    a) 块级作用域、函数作用域

    代码块(即类似js中函数 {  }花括号)中所定义的所有变量在代码块外是不可见的。  由于js中没有块级作用域的概念,只有函数作用域的概念,所以函数作用域的方法和功能与块级作用域基本相同。

    b) 作用域链

    全局作用域:在函数外进行的变量声明,即为全局声明,可在全局作用域范围内使用

    函数作用域:在函数内进行的变量声明,或变量的赋值,只在函数调用时进行,赋值时如果内部没有该声明,则沿着作用域链在函数外部找该变量

    c) 函数的数据类型

    函数调用的返回值:function fn (){ return 123; } 调用函数fn()后,console.log( fn() )输出结果数值:123

    所以函数调用后的数据类型与其返回值相关,如果没有返回值,则为undefined

    函数的直接数据类型:函数的真实数据类型是对象,console.log( typeof fn ),直接typeof 函数名fn 打印结果为function但function不是基本数据类型,是typeof方法额外归类的数据类型

    d) 函数的参数

    function fn (a , b) { }  a , b形参,在调用过程中fn( 1 , 2 );传入的参数1,2是实参

    function fn (a , b) {

    console.log( fn.arguments )

    console.log( fn.length )

    }

    fn(1 , 2);  第一个打印结果为[ 1 , 2 ]是伪数组,所以函数的arguments是实参的容器,第二个打印结果为2,函数的length是形参的个数

    e) 回调函数:在一个函数传入另一个函数,并且可以调用执行

    function fn ( callback ){ callback() }

    function caller (){ console.log(“执行caller”) }

    fn( caller ); 执行结果打印“执行caller”

    3)函数节流

    由于类似onmouseoverwindow.onresize这些事件,只要执行条件稍微改变,便会执行绑定事件中的代码,消耗性能,所以可以添加一个节流阀如下:

    document.onmouseover = function ( ) {

    }

    使用上述方法,可以保证在500毫秒以内onmouseover事件中绑定的代码只执行一次

    DOM对象的常用事件、方法

    onfocus文本框获取焦点时执行事件    onblur文本框失去焦点时执行事件     

    focus文本框获取焦点事件     onclick点击事件

    onkeyup键盘弹起事件     onkeydown键盘按下事件     ondblclick鼠标双击事件      onscroll滚动事件

    onmouseover鼠标经过事件      onmouseout鼠标离开事件        onmousemove鼠标移动事件

    onmousedown鼠标按下事件(多用于拖拽)      onmouseup鼠标弹起事件

    cloneNode(true)克隆节点,传入true表示深层克隆,false只克隆当前节点       

    appendChild()追加子节点,追加到父元素的最后面     removeChild()移除子节点

    father.insertBefore(clone,son)追加子节点,追加节点clone到子节点son前面        

    getAttribute() 获取标签属性        setAttribute( “class”, “cal” ) 设置标签属性

    removeAttribute(“id”) 移除标签属性      getAttributeNode() 获取属性节点

    DOM对象的常用属性

    innerHTML获取或设置对象标签中的内容,设置的内容会被当做节点对象解析到DOM树上

    innerText(存在兼容问题,部分浏览器低版本只支持textContent获取或设置对象标签的纯文本,HTML标签会被忽略

    className获取或设置对象的类名

    value获取或设置input标签在button类型下的显示内容

    disable  input 标签的disable = true表示禁用该标签

    placeholder  input 标签添加这个属性,可以“占位”显示内容

    selected  option标签添加这个属性(selected=”selected”),表示被选中

    checked  input 标签type = checkbox时,checked = true表示被选中

    childNodes  子节点(包括li标签等元素节点和换行等文本节点)

    nodeType    nodeType == 1 表示元素节点,nodeType == 3表示文本节点

    children  子元素(只包括元素不包括文本节点)

    nextSibling 下一个兄弟节点,包含文本节点

    nextElementSibling 下一个兄弟元素,不包含文本节点,但存在兼容问题

    previousSibling 上一个兄弟节点

    previousElementSibling 上一个兄弟元素

    parentNode  父节点

    style  设置或者获取样式

    firstChild  第一个子节点

    firstElementChild  第一个子元素

    lastChild  最后一个子节点

    lastElementChild  最后一个子元素

    <select multiple = “ multiple”> 可以将select标签变为多选框

    内置对象(ArrayString)方法的简单介绍

    1数组Array对象的基本方法  length 数组的长度

    ·添加元素

    push():向数组末尾添加新元素,返回值是数组新的长度

    unshift():向数组开头增加一项 返回值是数组的新长度

    ·删除元素

    pop():删除数组最后一个元素 并返回该元素

    shift():删除数组第一个元素,并返回该元素

    splice():有删除、插入、替换三个功能

    删除:需要两个参数,要删除的第一项的索引、要删除的项数。

        var colors = ["red", "green", "blue"];

        var removed = colors.splice(0,1);

        console.log(colors); ----- ["greeen", "blue"]

        console.log(removed); ----- ["red"]

    插入:需要三个参数:起始位置、0(要删除的项数)、要插入的项

        var colors = ["red", "green", "blue"];

        var removed = colors.splice(1,0,"yellow", "orange");

        console.log(colors); ----- ["red", "yellow", "orange", "green", "blue"]

    替换:需要三个参数:起始位置、要删除的项数、要插入的项

        var colors = ["red", "green", "blue"];

        var removed = colors.splice(1,1,"yellow", "orange");

        console.log(colors); ----- ["red", "yellow", "orange", "blue"]

        console.log(removed); ----- ["green"]

    ·提取元素

    slice(start , end):返回start和end之间的项,但不包括end项,如果只有一个start参数,则返回start开始到数组结束的所有项

        var colors = ["red", "green", "blue", "yellow", "purple"];

        console.log(colors.slice(1)); ----- ["green","blue","yellow","purple"]

        console.log(colors.slice(1,4)); ----- ["green","blue","yellow"]

    ·拼接

    concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

        var values = [1, 2, 3];

        console.log(values.concat(4,5)); ----- [1,2,3,4,5]

        console.log(values.concat([4,5],[6,7])); ----- [1,2,3,4,5,6,7]

        console.log(values); ----- [1,2,3]

    join():把数组中的每一项 按照指定的分隔符拼接成字符串

        var values = ["a", "b", "c"];

        console.log(values.join("a")); ----- "aabac"

    ·排序

    reverse():倒序数组 返回倒序后的数组 原有数组改变

    sort(function(a,b){return b-a}):根据传入的函数进行排序,b-a从大到小;a-b从小到大

    ·ES5中引入的部分数组方法  存在一定兼容性问题

    a )  forEach( )   类似for循环便利

        var arr=["Tom",20,"Hello",function(){}];

        arr.forEach(function(value,i){

            console.log(i+"==="+value);

    })  

                                                    

     

     

     

    b )  map( )  映射  返回一个数组,数组中每个元素是map函数中fn的返回值

        var arr=[1,2,3,4,5];

        var temp = arr.map(function(v,i){

            return v;

        })

    console.log(temp);  -------[1,2,3,4,5]

    c )  filter( )  筛选  按照返回条件获得筛选后的数组

        var arr = [1 , 2 , 3 , 4 , 5 ];

        var temp = arr.filter(function (v, i) {

            return v % 2 === 1;       提供筛选条件,返回奇数项

        })

    console.log(temp); -------[1 , 3 , 5]

    d )  some( )  判断数组中至少有一个数据符合要求,否则返回false

        var arr = ["Tom", function () {}, "123"];

        var temp = arr.some(function (v) {

            return typeof v === "number";   判断是否有数值类型元素,没有返回false

        })

    console.log(temp);

    e )  every( )  判断数组中所有数据符合要求,否则返回false

        var arr = [1,2,3,4,5,"6"];

        var temp = arr.every(function (v) {

            return typeof v === "number"; 不是所有都是数值类型元素,所以返回false

        })

    console.log(temp);

    f )  indexOf( )  在数组中查找元素,如果有该元素,返回元素的(索引),否则返回-1

        var arr = [1,2,3,4,5,3,5,6,7,5];

    var temp = arr.indexOf(7,0);  

    7,0 两个参数表示:从第0号索引开始找7的索引值

    console.log(temp);     ------ 8

    g )  lastIndexOf( ) 在数组中查找元素,从后往前找如果有该元素,返回元素的(索引),否则返回-1

        var arr = [1,2,3,4,5,3,5,6,7,5];

        var temp1 = arr.lastIndexOf(3);     返回值5,从右往左第一个3的索引值

    var temp2 = arr.lastIndexOf(3,3);  

    返回值2,从索引为3的元素开始,从右往左找第一个3的索引是2

    console.log(temp1);

    console.log(temp2);

    2字符串String的基本方法基本包装类型String/Number/Booleanjs为了操作方便,给不是对象的数据类型,添加了包装类型,让其也能像对象一样具备属性和方法)length:字符串的长度

    ·字符操作方法

    charAt()    获取指定索引处字符

    charCodeAt()  获取指定索引处字符的ASCII码

    fromCharCode() 把ASCII码转换成字符串

    ·字符串截取、拼接方法   

    concat("a" , "b")    拼接字符串,等效于+方法,+方法更常用

    slicesubstring在存在负数情况下会有差异

    slice(start,end)   从start索引开始,截取到end索引位置,end不截取

    substring(start,end) 从start索引开始,截取到end索引位置,end不截取

    substr(start,length)    从start索引开始,截取length个字符

    ·位置方法

    indexOf(str)   返回指定内容在原字符串中的索引,不存在返回-1

    lastIndexOf(str) 从后往前找,如果有该字符,返回字符(索引),否则返回-1

    ·字符串分割方法

    trim()   去除字符串首尾的空字符

    split(str)  以传入的参数str为分割,把字符串切割成字符数组

    ·大小写转换方法

    toLocaleUpperCase()toUpperCase()  转换大写

    toLocaleLowerCase()toLowerCase()  转换小写

    ·字符串匹配方法

    match(str/Regex)   传入一个参数,匹配传入的字符串,返回数组

    search(str/Regex)  传入一个参数,匹配传入的字符串,返回该字符串的第一个匹配项索引

    replace(str/Regex , str/Regex) 字符串替换,第一个参数是需要替换的字符串,第二个参数是想要替换成的字符串

        var code = "future";

        console.log(code.match(/u/)) ----- ["u", index: 1, input: "future "]

        console.log(code.match(/u/g))----- ["u", "u"]

        console.log(code.search(/u/g)) ----- 1

        console.log(code.replace(/u/,"a")) ----- "fature"

        console.log(code.replace(/u/g,"a")) ----- "fatare"

    ·字符串比较

    localeCompare()  两个字符串比较的是ASCII码

    Str1.localeCompare(Str2)  

    Str1 > Str2 返回正数,一般是1

    Str1 == Str2 返回0

    Str1 < Str2  返回负数,一般是-1

     

     

  • 相关阅读:
    启xin宝app的token算法破解——frida篇(四)
    启xin宝app的token算法破解——token分析篇(三)
    启xin宝app的token算法破解——逆向篇(二)
    启xin宝app的token算法破解——抓包分析篇(一)
    关于企查查app sign研究
    企查查app (二)
    企查查app (完结)
    企查查app 初步探索
    天眼查sign 算法破解
    企查查app新增企业数据抓取
  • 原文地址:https://www.cnblogs.com/Tabb/p/6436220.html
Copyright © 2011-2022 走看看