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)函数节流
由于类似onmouseover、window.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标签变为多选框
⑧内置对象(Array、String)方法的简单介绍
(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/Boolean:js为了操作方便,给不是对象的数据类型,添加了包装类型,让其也能像对象一样具备属性和方法)length:字符串的长度
·字符操作方法
charAt() 获取指定索引处字符
charCodeAt() 获取指定索引处字符的ASCII码
fromCharCode() 把ASCII码转换成字符串
·字符串截取、拼接方法
concat("a" , "b") 拼接字符串,等效于+方法,+方法更常用
slice与substring在存在负数情况下会有差异
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
JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)的更多相关文章
- JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)
1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...
- JavaScript (JS)基础:ECMAScript 浅析 (含Math基本方法解析)
浏览器端JavaScript的组成 ECMAScript:语法规范 DOM:Document Object Model 文档对象模型,操作页面元素 BOM:Browser Object Model ...
- JS基础-DOM
DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...
- JS基础DOM篇之二:DOM级别与节点层次?
通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别 在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...
- js基础总结03 --操作数组
修改于 2019-11-10 1 length:长度 <script> var arr = [1,2,3,4,5,6,7,8]; console.log(arr.length);//arr ...
- js set集合转数组 Array.from的使用方法
1.set集合转化Array数组 注意:这个可以使用过滤数组中的重复的元素 你可以先把数组转化为set集合 然后在把这个集合通过Array.from这个方法把集合在转化为数组 var set = n ...
- Js基础知识7-JavaScript所有内置对象属性和方法汇总
对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...
- js中的数组和字符串的一些方法
数组的一些方法: 1.join()和split()方法 <script type="text/javascript">var x;var a=new Array();a ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
随机推荐
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- POI Excel 插入新的行,下面的行动态移动
在做Excel 模板时,会有遇到 模板行数不固定,如下图 需要在行次4下面再插入一行:注意:(插入的行如果是下面空白行,需要创建行) 解决方法是使用shifRows方法,第1个参数是指要开始插入的 ...
- 深入理解java虚拟机读书笔记1--java内存区域
Java在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途.创建和销毁的时间,有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,有些则是与线程一一对应,随 ...
- python变量声明及简单数据类型
一.python声明变量 变量的命名和使用 # 在Python中使用变量时,需要遵守一些规则和指南. # 违反这些规则将引发错误,而指南旨在让你编写的代码更容易阅读和理解.请务必牢记下述有关变量的规则 ...
- JZOJ 2136. 【GDKOI2004】汉诺塔
2136. [GDKOI2004]汉诺塔 (Standard IO) Time Limits: 3000 ms Memory Limits: 128000 KB Detailed Limits ...
- django_数据库操作—增、删、改、查
增加 增加数据有两种方法 1> sava >>> from datetime import date >>> book = BookInfo( btitle= ...
- (转) Redis哨兵的详解
1 哨兵的作用 哨兵是redis集群架构中非常重要的一个组件,主要功能如下: 1. 集群监控:负责监控redis master和slave进程是否正常工作 2. 消息通知:如果某个redis实例有故障 ...
- Birthday Paradox
Birthday Paradox Sometimes some mathematical results are hard to believe. One of the common problems ...
- laravel5.2总结--composer使用和自动加载介绍
首先看下phpcomposer官方的定义,composer是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer ...
- html调用commonjs规范的js
a.js define(function(require, exports, module) { var test = function(){ console.log("hello worl ...