zoukankan      html  css  js  c++  java
  • JavaScript学习笔记-ES5

    https://wangdoc.com/javascript/basic/grammar.html
    简介:本文内容主要基于 ECMAScript 5.1 版本

    概述

    1.变量声明:var
    2.变量没有赋值,则为undefined
    3.变量/函数声明 自动提升
    4.控制台输出:console.log()
    5.大小写敏感
    6.注释: //,/**/,
    7.条件语句:if ,switch;
    8.switch(param){case "111": break;default:print("end")}
    9.三元运算符 ?: 公式: (条件) ? 表达式1 : 表达式2; 解释:如果条件true,返回表达式1,否则返回表达式2
    10.循环:while,for,do...while
    11.标签:通常和break和continue配合使用,跳出特定的循环
    12.typeof 返回数据类型,数组和对象都返回object
    13.instanceof 区分数组和对象,null返回object

    null,undefined和布尔值

    14.null和undefined的区别:null是一个表示“空”的对象,转为数值时为0;undefined是一个表示"此处无定义"的原始值,转为数值时为NaN。
    15.undefined,null,false,0,NaN,"",'' 转换为布尔值都是false
    16.默认情况下,JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。

    数值

    17.强制转换:parseInt() 只会返回数字或NaN ,parseFloat() 只会返回浮点数和NaN,空字符串也是NaN
    18.isNaN() 只对数值有效,传入字符串,对象,数组会先被转换为数值再判断,即Number(字符串/对象/数组)
    19.isFinite() 判断某个值是否为正常的数值

    字符串

    20.字符串可以被视为字符数组(即使用下标定位),但是不能改变!
    21.JavaScript 对 UTF-16 的支持是不完整的,由于历史原因,只支持两字节的字符

    对象

    22.键名可以不加引号,E36支持symbol值作为键名
    23.括号里面 只能是表达式,大括号里面只能解释为代码块
    24.读取/赋值对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。
    25.Object.keys()可以获取对象的所有属性
    26.delete 删除对象属性,不存在的属性也不报错!
    27.Object.defineProperty 和 继承的属性无法删除
    28.in 检查键名是否存在,但是不判断是否继承
    29.hasOwnProperty 判断是否为对象自身的属性
    30.for...in循环遍历对象属性
    31.with语句 它的作用是操作同一个对象的多个属性时,提供一些书写的方便。

    函数

    32.函数声明:function命令,函数表达式,Function构造函数
    33.函数声明会被提升,所以当一个函数多次声明,后面的会覆盖前面的
    34.return 不是必须的,函数可以调用自身
    35.使用函数表达式声明函数,只会提升变量声明
    36.函数属性:name 函数名,length 参数个数,toString() 返回字符串,函数源码
    37.作用域: ES5只有全局作用域和函数作用域
    38.函数参数不是必需的,JavaScript 允许省略参数。可以不用赋值。如x=""
    39.arguments对象 表示函数的所有参数,arguments[0]就是第一个参数;
    40.非严格模式,argument可以修改传入参数;严格模式,argument修改并不会影响到实际的参数;
    41.闭包:函数内部的函数
    42.立即调用的函数表达式:(function(){/* code */}();
    43.凡是使用别名执行eval,eval内部一律是全局作用域。

    数组

    44.允许空位存在,length不过滤空位 ,如s=[1,,2],length为3
    45.使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历,空位都会被跳过。

    数据类型的转换

    46.支持自动转换(和java一样,python不支持且必须手动强制转换)
    47.强制转换:Number(),String(),Boolean()

    错误处理机制

    48.SyntaxError 语法错误; ReferenceError 变量不存在;RangeError 超出范围;TypeError 变量或参数类型错误;URIError URI相关函数参数不正确;EvalError eval函数没有正确执行
    49.自定义错误:需要继承Error对象
    50.手动中断程序抛异常:throw
    51.try...catch finally

    console对象与控制台

    52.log() 输出信息,自动添加换行符,相当于java system.out.println(); 支持占位符
    53.CSS格式字符串占位符: %c
    54.warn() 输出警告信息,在最前面加黄色三角
    55.error() 输出错误信息,在最前面加红色叉叉
    56.table() 输出转换为表格展示
    57.count() 用于计数,输出它被调用了多少次
    58.assert(条件,'条件不成立') 用于断言,如果断言失败,不会中断程序;
    59.group(),groupEnd(),groupCollapsed() 分组显示信息
    60.clear() 清除控制台所有输出

    控制台命令行API

    61.$_ 返回上一个表达式的值
    62.$0 - (4 63.)(selector) 等于document.querySelector() 返回第一个匹配的元素
    64.$$(selector) 等于document.querySelectorAll() 返回选中的DOM对象
    65.$x(path) 返回一个数组
    66.monitorEvents(object[, events]) ,unmonitorEvents(object[, events]) 监听和取消监听
    67.debugger 作用是断点

    标准库

    68.Object

    实例方法:
    68.1 valueOf() 返回当前对象对应的值,默认返回对象本身(obj.valueOf() 等于 obj);
    68.2 toString() 返回一个对象的字符串形式,默认情况下返回[object Object],数组/字符串/函数/Date对象都定义了自己的toString()方法,可重写;
    toString 应用: Object.prototype.toString.call(obj) 可用来判断一个值的类型(和typeof不一样!);
    68.3 toLocaleString() 返回本地化的字符串形式,Array,Number,Date 都重写了该方法;
    68.4 hasOwnProperty(str) 返回布尔值,表示该对象是否含有'str'属性;

    69.属性描述对象

    69.1 Object.getOwnPropertyDescriptor() 获取属性描述对象
    69.2 Object.getOwnPropertyNames() 获取参数对象自身的所有属性的属性名,无论是否可遍历;
    69.3 Object.defineProperty(object, propertyName, attributesObject) 允许通过属性描述对象定义或修改一个属性,然后返回修改后的对象;
    69.4 Object.propertyIsEnumerable() 用来判断某个属性是否可遍历
    69.5 元属性(即属性描述对象):
    value 目标属性的值;
    writable 布尔值,决定了目标属性的值是否可改变,若是强行改变,严格模式下会报错;
    enumerable 可遍历性;for..in循环,Object.keys方法,JSON.stringify方法 不会取到设置为不可遍历的属性;
    configurable 可配置性;决定是否可修改属性描述对象 以及 是否可删除目标属性;
    69.6 控制对象状态: 冻结对象读写状态

    70.Array

    70.1. Array.isArray() 判断是否为数组;
    70.2 valueOf() 返回数组本身,toString() 返回数组的字符串形式;
    70.3 push() 数组末端增加元素,并返回增加后的数组长度,pop() 删除数组的最后一个元素,并返回该数组;
    70.4 shift() 删除第一个元素,并返回该元素; unshift() 在数组的第一个位置添加元素;
    70.5 join() 以指定参数作为分隔符,将所有数组成员连接为一个字符串返回,不提供参数,默认为逗号;
    70.6 concat() 用于多个数组的合并,返回一个新的数组
    70.7 reverse() 颠倒数组顺序,返回该数组
    70.8 slice(start,end) 提取目标数组的一部分,返回新的数组;
    70.9 arr.splice(start, count, addElement1, addElement2, ...); 删除数组的一部分成员并可以在删除的位置添加新的元素,返回被删除的元素;原数组被改变;
    70.10 sort() 按字典顺序排序
    。。。等

    71.包装对象

    72.Boolean 对象

    注: 双重否运算符(!)也可以将任意值转为布尔值
    Boolean(1) // true
    Boolean('false') // true
    Boolean([]) // true
    Boolean({}) // true
    Boolean(function () {}) // true
    Boolean(/foo/) // true

    73.Number对象

    73.1 静态属性
    Number.POSITIVE_INFINITY:正的无限,指向Infinity。
    Number.NEGATIVE_INFINITY:负的无限,指向-Infinity。
    Number.NaN:表示非数值,指向NaN。
    Number.MIN_VALUE:表示最小的正数(即最接近0的正数,在64位浮点数体系中为5e-324),相应的,最接近0的负数为-Number.MIN_VALUE。
    Number.MAX_SAFE_INTEGER:表示能够精确表示的最大整数,即9007199254740991。
    Number.MIN_SAFE_INTEGER:表示能够精确表示的最小整数,即-9007199254740991。
    73.2 实例方法
    toString() 转换为字符串输出
    toFixed() 转换为指定位数的小数,四舍五入不固定!
    toExponential() 转为科学计数法形式
    toLocaleString() 接收一个地区码作为参数,返回当前数字在该地区的当地书写形式;可以设置为percent或currency

    74.this 详解

    a.this 就是属性或方法’当前‘所在的对象;
    b.this是动态变化的;
    c.this是被设计为在函数体内部,指代函数当前运行环境;
    d.避免多层this,第二层this指向全局对象window;(解决方法,在第一层使用变量固定this的值,在第二层调用变量);严格模式下,内部this指向顶层对象,报错;
    e.避免回调函数中的this;
    f.绑定this的方法:call(thisValue,arg1,agr2,...) 第一个参数是this所指向的哪个对象,后面的参数是函数调用时需要的参数;
    g.绑定this的方法:apply(thisValue,[arg1,arg2,...]),和call()类似,区别是参数为数组;
    h.bind() 用于将函数体内的this绑定到某个对象,返回新的函数,不会改变原来的函数;
    其他扩展查看原文(比如获取数组中最大值);

    75.对象的继承

    概念:JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。
    a.构造函数
    b.prototype属性:函数的默认属性,指向一个对象;对于构造函数来说,生成实例时,该属性自动成为实例对象的原型;
    c.constructor属性,prototype的属性,可以知道某个实例对象是哪个构造函数产生的;还可以通过实例对象.constructor()实例化一个新对象;

    76.模块

    a.方法1: 把模块写成一个对象 ; 缺点: 会暴露所有模块成员,外部可以改写;
    b.方法2: 使用构造函数封装私有变量; 缺点: 耗内存;违背构造函数和实例对象在数据上分离的原则(即实例对象的数据,不应该保存在实例对象以外);
    c.方法3: 使用立即执行函数封装私有变量;------基本写法!

    var module1 = (function () {
     var _count = 0;
     var m1 = function () {
      //...
     };
     var m2 = function () {
      //...
     };
     return {
      m1 : m1,
      m2 : m2
     };
    })();
    

    d.放大模式: 一个模块很大或者一个模块需要继承另一个模块的情况;

    var module1 = (function (mod){
     mod.m3 = function () {
      //...
     };
     return mod;
    })(module1);
    

    e.宽放大模式: 防止加载一个不存在空对象;

    var module1 = (function (mod) {
     //...
     return mod;
    })(window.module1 || {});
    

    f.模块特点: 独立性;为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

    g.继承

    function sub(){
    Super.call(this)
    }
    

    76.严格模式

    'user strict';
    a. 只允许在全局作用域声明函数
    b.新增了一些保留字(implements、interface、let、package、private、protected、public、static、yield等)

    77.异步操作

    概念
    a. 单线程模型:js同时只能执行一个任务;但js引擎有多个线程,单个脚本只能在一个(主)线程上运行,其他线程在后台配合;
    b.Web Worker 标准:允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JavaScript 单线程的本质。
    c.任务队列和事件循环:js引擎除了有一个主线程,还有多个任务队列负责处理异步任务;js引擎负责循环检查任务队列的异步任务是否满足进入主线程执行的条件(有回调函数)

    异步操作的模式:
    a.回调函数

    function f1(callback) {
    // ...
    callback();
    }
    
    function f2() {
    // ...
    }
    
    f1(f2);
    

    优点:简单,容易实现和理解;
    缺点:不利于阅读和维护,代码高度耦合,结构混乱;

    b.事件监听
    f1.on('done', f2); //当f1发生done事件,就执行f2
    优点:可以绑定多个事件
    缺点:事件驱动,流程不清晰;

    c.发布/订阅 = 观察者模式
    jQuery.subscribe('done', f2);

    异步操作的流程控制:
    a.串行执行:一个任务完成后,再执行另一个;

    var items = [ 1, 2, 3, 4, 5, 6 ];
    var results = [];
    
    function async(arg, callback) {
    console.log('参数为 ' + arg +' , 1秒后返回结果');
    setTimeout(function () { callback(arg * 2); }, 1000);
    }
    
    function final(value) {
    console.log('完成: ', value);
    }
    
    function series(item) {
    if(item) {
    async( item, function(result) {
    results.push(result);
    return series(items.shift());
    });
    } else {
    return final(results[results.length - 1]);
    }
    }
    
    series(items.shift());
    

    b.并行执行,利用forEach

    // forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
    //注意: forEach() 对于空数组是不会执行回调函数的
    var items = [ 1, 2, 3, 4, 5, 6 ];
    items.forEach(function(item) {
    console.log(item)
    });
    
    //并行执行
    var items = [ 1, 2, 3, 4, 5, 6 ];
    var results = [];
    
    function async(arg, callback) {
    console.log('参数为 ' + arg +' , 1秒后返回结果');
    setTimeout(function () { callback(arg * 2); }, 1000);
    }
    
    function final(value) {
    console.log('完成: ', value);
    }
    
    items.forEach(function(item) {
    async(item, function(result){
    results.push(result);
    if(results.length === items.length) {
    final(results[results.length - 1]);
    }
    })
    });
    

    c.并行和串行的结合:设置门槛,几个任务一起执行

    var items = [ 1, 2, 3, 4, 5, 6,8,9,10,11,12,14 ];
    var results = [];
    var running = 0;
    var limit = 3; //设置限制limit个任务一起执行
    
    function async(arg, callback) {
    console.log('参数为 ' + arg +' , 1秒后返回结果');
    setTimeout(function () { callback(arg * 2); }, 1000);
    }
    
    function final(value) {
    console.log('完成: ', value);
    }
    
    function launcher() {
    while(running < limit && items.length > 0) {
    var item = items.shift();
    async(item, function(result) {
    results.push(result);
    running--;
    if(items.length > 0) {
    launcher();
    } else if(running == 0) {
    final(results);
    }
    });
    running++;
    }
    }
    
    launcher();
    

    Promise对象

    a.状态: pending,(fulfiled,rejected) === resolved
    b.new Promise(function(resolve,reject){//.........});
    resolve 将pending改为fulfilled传递出去
    reject 将pending改为rejected传递出去
    c.then(func,func)可以接受两个函数,第一个是操作成功调用的函数,第二个是操作失败调用的函数
    多个then方法,操作成功只会执行最后一个步骤的返回值,但是操作失败会把所有的步骤失败结果都打印!
    d.Promise 的缺点是,编写的难度比传统写法高,而且阅读代码也不是一眼可以看懂。你只会看到一堆then,必须自己在then的回调函数里面理清逻辑。

    e.优点: 无论何时访问,都可以获取promise的状态

    DOM

    Node 接口 - 属性

    1.nodeType属性返回一个整数值,表示节点的类型。
    文档节点(document):9,对应常量Node.DOCUMENT_NODE
    元素节点(element):1,对应常量Node.ELEMENT_NODE
    属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
    文本节点(text):3,对应常量Node.TEXT_NODE
    文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
    文档类型节点(DocumentType):10,对应常量Node.DOCUMENT_TYPE_NODE
    注释节点(Comment):8,对应常量Node.COMMENT_NODE

    2.nodeName 属性返回节点名称
    文档节点(document):#document
    元素节点(element):大写的标签名
    属性节点(attr):属性的名称
    文本节点(text):#text
    文档片断节点(DocumentFragment):#document-fragment
    文档类型节点(DocumentType):文档的类型
    注释节点(Comment):#comment

    3.nodeValue 属性返回当前节点本身的文本值,可读写;
    只有文本,注释,属性节点有文本值,其他节点返回null

    4.textContent属性忽略HTML标签,返回当前节点和它的所有后代节点的文本内容,可读写(对HTML标签自动转义);

    5.baseURI属性返回一个字符串,表示当前网页的绝对路径。浏览器根据这个属性,计算网页上的相对路径的 URL。该属性为只读。相当于 window.location.href;可根据<base>标签更改;

    6.Node.nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null。文本节点和注释节点也算。可以用来遍历所有子节点;

    7.previousSibling 属性返回紧跟在当前节点前面的第一个同级节点。如果当前节点前面没有同级节点,则返回null。

    8.parentNode 属性返回当前节点的父节点;
    对于一个节点来说,它的父节点只可能是三种类型:元素节点(element)文档节点(document)文档片段节点(documentfragment)
    文档节点(document)和文档片段节点(documentfragment)的父节点都是null。另外,对于那些生成后还没插入 DOM 树的节点,父节点也是null。

    9.parentElemet 属性返回当前节点的父 元素节点;

    10.firstChild属性返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null。
    lastChild 和 firstChild 用法一致;
    注意,firstChild返回的除了元素节点,还可能是文本节点或注释节点。

    11.childNodes属性返回一个类似数组的对象(NodeList集合),成员包括当前节点的所有子节点。

    12.isConnected属性返回一个布尔值,表示当前节点是否在文档之中。

    Node 接口 - 方法

    1.appednChild() 接受一个节点对象作为参数,插入当前节点的最后面;
    ps:如果是已经存在的节点,相当于移动位置;

    2.hasChildNodes方法返回一个布尔值,表示当前节点是否有子节点。
    以下两个方法也可以判断是否有子节点:

    node.firstChild !== null
    node.childNodes && node.childNodes.length > 0
    

    3.cloneNode(boolean) 接受一个布尔值作为参数表示是否同时克隆子节点 ,默认为false;
    注意:
    a.事件监听和onclick属性不会克隆;
    b.复制后需要使用appendChild添加到文档中;
    c.id,name 需要更改,以免重复;

    4.parentNode.insertBefore(newNode,referenceNode) 用于将某个节点插入指定位置前面;
    注:如果insertBefore方法的第二个参数为null,则新节点将插在当前节点内部的最后位置,即变成最后一个子节点。

    5.removeChild方法接受一个子节点作为参数,用于从当前节点移除该子节点。返回值是移除的子节点。

    6.replaceChild方法用于将一个新的节点,替换当前节点的某一个子节点。
    user: var replacedNode = parentNode.replaceChild(newChild, oldChild);

    7.contains方法返回一个布尔值,表示参数节点是否满足以下三个条件之一。
    **
    参数节点为当前节点。
    参数节点为当前节点的子节点。
    参数节点为当前节点的后代节点。
    **

    8.isEqualNode方法返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。

    9.normalize方法用于清理当前节点内部的所有文本节点(text)。它会去除空的文本节点,并且将毗邻的文本节点合并成一个.

    10.getRootNode()方法返回当前节点所在文档的根节点document

    NodeList 接口

    1.获取NodeList实例
    Node.childNodes 动态集合,DOM删除或新增一个节点,都会影响;
    document.querySelectorAll()

    2.length 属性返回节点数量
    3.forEach() 遍历所有节点成员;
    4.item(int) 接受一个整数值作为参数,返回该位置上的成员;一般不使用,直接用方括号;

    5.keys()返回键名的遍历器,values()返回键值的遍历器,entries()返回的遍历器同时包含键名和键值的信息。

    HTMLCollection 接口

    1.没有forEach方法,只能用for遍历;
    2.HTMLCollection实例都是动态集合;

    ParentNode接口

    1.只有元素节点,文档节点,文档片段节点才会有ParentNode接口;
    2.childern 属性,返回HTMLCollection实例;只读;
    3.firstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点,则返回null;
    4.lastElementChild属性返回当前节点的最后一个元素子节点。如果没有任何元素子节点,则返回null;
    5.childElementCount属性返回一个整数,表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点,则返回0。
    6.append方法为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面
    7.prepend方法为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面

    ChldNode 接口

    1.remove() 从父节点移除当前节点; use: e1.remove() 移除e1节点
    2.before() 在当前节点前面插入一个或多个级节点;after相反;
    3.replaceWith方法使用参数节点,替换当前节点。参数可以是元素节点,也可以是文本节点。
    use: e1.repaceWith(span)

    Document节点

    1.概述
    document对象继承了EventTarget接口和Node接口,并且混入(mixin)了ParentNode接口。
    正常的网页,直接使用document或window.document。
    iframe框架里面的网页,使用iframe节点的contentDocument属性。
    Ajax 操作返回的文档,使用XMLHttpRequest对象的responseXML属性。
    内部节点的ownerDocument属性。

    2.document.scrollingElement.scrollTop = 0; 页面滚动到顶部;

    3.document.activeElement 返回获得当前焦点的DOM元素;

    4.全屏操作
    document.fullscreenEnabled 确认是否可切换全屏;
    requestFullscreen() 切换全屏
    exitFullscreen() 退出全屏

    5.节点集合属性(以下属性返回一个HTMLCollection实例)
    document.links属性返回当前文档所有设定了href属性的<a><area>节点。
    document.forms属性返回所有<form>表单节点。
    document.images属性返回页面所有<img>图片节点。

    6.文档静态信息属性
    a. document.documentURI,document.URL 都返回一个字符串,表示当前文档的网址。不同之处是它们继承自不同的接口,documentURI继承自Document接口,可用于所有文档;URL继承自HTMLDocument接口,只能用于 HTML 文档。
    b.document.domain 属性返回当前文档的域名,不包含协议和端口。只有次级域名网页可更改域名,但是必须设置端口。
    c.document.title 返回当前文档的标题。
    d.document.referrer 表示当前文档的访问者来自哪里。
    e.document.compatMode 返回浏览器处理文档的模式;一般来说,如果网页代码的第一行设置了明确的DOCTYPE(比如<!doctype html>),document.compatMode的值都为CSS1Compat。

    7.文档状态属性
    a.document.readyState 返回当前文档的状态,共有三种可能的值。
    loading:加载 HTML 代码阶段(尚未完成解析)
    interactive:加载外部资源阶段
    complete:加载完成

    b.document.cookie 用来操作浏览器cookie

    8.方法
    a.document.querySelector方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
    b.document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象(静态集合),包含所有匹配给定选择器的节点。
    c.document.getElementsByTagName()方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例),可以实时反映 HTML 文档的变化。如果没有任何匹配的元素,就返回一个空集。--------大小写不敏感!
    d.document.getElementsByClassName()方法返回一个类似数组的对象(HTMLCollection实例),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中。
    参数可以是多个class,用空格分隔;
    e.document.getElementsByName()方法用于选择拥有name属性的 HTML 元素,返回一个类似数组的的对象(NodeList实例),因为name属性相同的元素可能不止一个。
    f.document.getElementById()方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。
    g.document.hasFocus方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。

    Element节点

    Element对象继承了Node接口
    实例属性
    1.Element.id 返回指定元素的id属性;
    2.Element.tagName 返回指定元素的大写标签名
    3.Element.dir 返回指定元素的文字方向
    4.Element.accessKey 返回分配给当前元素的快捷键
    5.Element.draggable 返回布尔值,表示当前元素是否可拖动;
    6.document.documentElement.lang 返回当前元素的语言设置
    7.Element.title 当前元素的 HTML 属性title
    元素状态的属性
    1.Element.attributes属性返回一个类似数组的对象,成员是当前元素节点的所有属性节点
    2.Element.dataset 读取data- 属性,eg. 属性名 data-columns,use: article.dataset.columns,也可以通过Element.getAttribute('data-columns') 获取属性
    3.Element.innerHTML属性返回一个字符串,等同于该元素包含的所有 HTML 代码。
    注意,读取属性值的时候,如果文本节点包含&、小于号(<)和大于号(>),innerHTML属性会将它们转为实体形式&、<、>。如果想得到原文,建议使用element.textContent属性。
    4.Element.outerHTML属性返回一个字符串,表示当前元素节点的所有 HTML 代码,包括该元素本身和所有子元素。
    5.Element.clientHeight,Element.clientWidth 返回元素节点的CSS高度和宽度;只对块级元素有效;包含padding部分,不包含border,margin;
    document.documentElement.clientHeight 和 window.innerHeght 值似乎相等
    6.Element.children属性返回一个类似数组的对象(HTMLCollection实例),包括当前元素节点的所有子元素。如果当前元素没有子元素,则返回的对象包含零个成员。
    注:这个属性与Node.childNodes属性的区别是,它只包括元素类型的子节点,不包括其他类型的子节点。
    Element.childElementCount属性返回当前元素节点包含的子元素节点的个数,与Element.children.length的值相同。
    7.Element.firstElementChild,Element.lastElementChild
    8.Element.nextElementSibling,Element.previousElementSibling
    实例方法
    1.属性相关方法
    getAttribute():读取某个属性的值
    getAttributeNames():返回当前元素的所有属性名
    setAttribute():写入属性值
    hasAttribute():某个属性是否存在
    hasAttributes():当前元素是否有属性
    removeAttribute():删除属性
    2.Element.focus(),Element.blur()
    Element.focus方法用于将当前页面的焦点,转移到指定元素上。
    use:document.getElementById('my-span').focus();

  • 相关阅读:
    controller传到页面的值出现乱码
    Uncaught SyntaxError: Unexpected identifier
    No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...
    jQuery,Ajax和json
    idea中tomcat启动但是访问不了localhost:8080页面
    不允许有匹配 "[xX][mM][lL]" 的处理指令目标。
    11.流程控制之if判断
    10.可变,不可变数据类型
    Python基础
    文件处理
  • 原文地址:https://www.cnblogs.com/Tester_Dolores/p/13925934.html
Copyright © 2011-2022 走看看