JavaScript的组成结构梳理

最新推荐文章于 2023-11-20 00:07:17 发布

weixin_33778778

最新推荐文章于 2023-11-20 00:07:17 发布

阅读量139

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000018061022

版权

JavaScript经历了残酷的竞争，至今已经统治了web世界，现在系统梳理一下相关的知识。

JavaScript可以分为三部分：ECMAScript、DOM和BOM。

一、ECMAScript是JavaScript的核心,规定了这门语言的数据、语法、结构等基本概念。

Global是ECMAScript最顶级的对象(兜底对象),但体现在代码中它是不存在的。在JavaScript脚本中使用此对象,会报错(not defined),但是ECMAScript规定Number、Boolean、Object、NaN、Math等对象都是Global对象的属性，对应的语法在此不做展开。

二、DOM是文档对象模型,是ECMAScript操作HTML的API。

DOM
DOM使用节点来把HTML以及XML文档描述成一个多层次的节点结构。

节点具有的通用属性和方法：nodeType nodeName nodeValue childNodes parentNode previousSibling nextSibling fistChild lastChild ownerDocument ||方法 hasChildNodes() appendChild() insertBefore() replaceChild() cloneNode()

常用的节点类型：Document(9)、Element(1)、Text(3)、Doctype(10)类型。

Document类型：document对象是其实例对象，是window的属性，表示整个HTML页面。
document对象的特有属性：documentElement(html节点) body(body节点) title URL(当前地址栏显示的url) domain(当前页面的域名) referrer(连接到当前页面的url)
document对象特有方法：getElementById() getElementByTagName() getElementByName(含有name属性值)

Element类型：所有的常用标签，<html>、<head>、<div>等标签。
特殊属性和方法：id、class等，getAttribute() setAttribute() removeAttribute() createElement()--创建一个元素节点。

Text类型：表示可以按字面意思解释的纯文本内容，可以是转义后的HTML字符，不能包含HTML代码。
特殊属性和方法：createTextNode() normalize()--去除空的文本节点以及合并两个相邻的文本节点 splitText(num)--将一个文本节点按照传入的位置值分隔成两个文本节点

DOM的扩展：(SelectorsAPI和HTML5两部分)

SelectorsAPI部分
querySelector()和querySelectorAll()方法：Document和Element类型节点调用。
eg.var target = document.querySelector('.abc/#abc/div');//querySelectorAll()得到的是集合。

HTML5部分
getElementsByClassName()方法、scrollIntoView()方法（相当于锚点定位）

DOM2和DOM3(在DOM1基础上引入了更多的交互能力)：

DOM2级样式部分
①通过style对象访问css属性(通过style标签在HTML中定义的属性)，属性含中划线改为驼峰
document.getElementById("abc").style.width = "100px";
document.getElementById("abc").style.backgroundColor = "red";
②cssText属性：设置多项属性变化最快捷的方式
document.getElementById("abc").style.cssText = "width: 10px; height: 20px; color: red;……"
③getComputedStyle()方法：(三种定义方式)计算后的样式的取值
var testItem = document.getElementById("abc")
document.defaultView.getComputedStyle("testItem").width//只读属性，不可更改设置。
④元素大小
偏移量：offsetHeight(元素可见高度+上下边框高度+水平滚动条宽度)、offsetWidth、offsetLeft(元素左边框距离其父元素的距离)、offsetRight【都为只读属性，每次访问重新计算】
客户区大小：clientWidth(元素内容宽度+左右边框宽度)、clientHeight【都为只读属性，每次访问重新计算】
滚动大小：scrollHeight(元素可见+滚动掉的+隐藏掉的的高度)、scrollWidth、scrollLeft(向左滚动掉的距离)、scrollTop
getBoundingClientRect()方法：该方法返回一个对象，包含四个属性left、right、top、bottom，表示相对视口的位置（当前浏览器时候的左上角为(0,0)）

DOM2级遍历
NodeIterator类型和TreeWalker类型
document.createNodeIterator(root, whatToShow, filter, false)方法创建NodeIterator实例,其中root为遍历的起点，whatToShow为显示的节点类型(特定值)，filter为显示节点的过滤器函数(自定义)，最后一个参数可忽略。
NodeIterator类型有个方法：nextNode()和previousNode(),表示深度遍历的方向(向前、向后)
遍历的过程：从给定的root根节点开始遍历，由以上两种方法确定方向向下遍历。

<div id="test">
    <p><b>Hello</b> world!</p>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
</div>
//想要遍历div元素中的所有元素
var testItem = document.getElementById("test");
var iterator = document.createNodeIterator(testItem, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node!=null){
    alert(node.tagName);
    node = iterator.nextNode();
}
//输入 DIV P B UL LI LI LI
//若只想输出li标签，可通过定义过滤器函数实现
var filter = function(node) {
    return node.tagName.toLowerCase() == 'li'? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
}
//NodeFilter.FILTER_ACCEPT表示接受该节点，NodeFilter.FILTER_SKIP表示跳过该节点

TreeWalker类型包含了NodeIterator类型的功能，更强大的是遍历方向的多样性
parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()
过滤器的属性，增加一个NodeFilter.FILTER_REJECT表示跳过该节点包括该节点的整个子树。

DOM2范围控制(略)

DOM事件（JavaScript与HTML交互的桥梁）

DOM2级事件规定：事件流---事件捕获阶段->目标阶段-->事件冒泡阶段（可在一、三阶段操作事件）
事件处理程序:
①HTML事件处理程序：

<div id="test" onclick="alert('hellow world')"></div>
<div id="test" onclick="sayHi()"></div>
function sayHi(){
    alert("hellow world")
}
//缺点，js和HTML耦合度高，加载HTML代码时js代码未加载（时差），作用域可能不同

②DOM0级事件处理程序：

var testItem = document.getElementById("test");
testItem.onclick = function() {
    alert("hellow world")
};
//移除事件处理程序 testItem.onclick = null;

③DOM2级事件处理程序：

testItem.addEventListener("click", function(){
    alert("hellow world")
},false);
//三参true表示捕获阶段处理事件，false冒泡阶段处理，通过removeEventListener()移除事（仅限命名函数）

IE事件处理程序：

testItem.attachEvent("onclick", function(){});

事件对象（event对象）

触发某个DOM事件时，会产生一个event对象，里面记录着所有与事件有关的信息。
event常用属性：currentTarget(当前元素)、target(事件目标)==>无事件委托时currentTarget=target=this，发生委托时==>currentTarget=this=事件注册元素(一般父元素)，target=事件目标元素(子元素)
阻止特定事件的默认行为：在event.cancelable == true时，用event.preventDefault()方法
阻止事件的冒泡行为：事先查看event.bubbles == true,表示支持冒泡，用event.stopPropagation()。

事件类型（待续）

①window对象下的整体事件：
load(可发生在img、script标签上，主要发生在window对喜爱那个上)、unload、resize、scroll
②焦点事件：blur、focus(均不支持冒泡)
③鼠标和滚轮事件:
9个鼠标事件mousedown、mouseup、click、dbclick、mouseenter、mouseover、mouseleave、mouseout、mousemove，一个滚轮事件mousewheel。
鼠标的位置信息：event中的clientX、clientY确定鼠标的视窗位置，pageX，pageY确定鼠标的页面位置(包含发生滚动的部分)，screenX、screenY确定鼠标的物理屏幕位置。
click事件过程：mousedown->mouseup->click
dbclick事件过程：mousedown->mouseup->click->mousedown->mouseup->dbclick
Android和iOS设备：不支持dbclick事件，轻击触发mousemove事件。
无障碍性（略）
④键盘事件
keydown（按任意键触发），keypress（按任意可影响输入字符键触发）、keyup（释放按键触发）--以上可取到哦输入的键码，如ASCII码。
textInput事件：相当于keypress事件，不同的是前者需可编辑区域触发，后者焦点事件触发，前者需实际字符键触发，后者删除键也可以，对象中有data属性，保存输入的字符的字符串表示。
⑤触摸和手势事件
触摸事件：touchstart、touchmove（手指滑动时触发，此事件默认滚动，可在此阻止滚动事件-preventDefault()）、touchend.
在移动端触摸屏幕发生的事件依次为：touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend.
手势事件：两只手指触摸屏幕时(同一元素)会产生手势，gesturestart(一个手指在屏幕上，另一只手指触屏时发生)、gesturechange(两只手指在屏幕上，任何一个手指移动时触发)、gestureend(任何一个手指从屏幕移开时触发)

事件委托：基于事件的冒泡机制，把子元素的事件委托给上级元素处理，减少了冗余代码，增强了页面性能。（对一类事件最少可定义一次，例如整个文档在最外层定义一个click事件）

三、BOM是浏览器对象模型,是ECMAScript操作浏览器的API。

window是BOM的核心对象，表示一个浏览器实例。它还充当着ECMAScript中的Global对象，因此网页中定义的变量、对象、函数等都是它的属性。

window对象浏览器相关的属性和方法：
screenLeft和screenTop表示窗口相对屏幕的位置(moveTo()和moveBy()表示移动窗口的方法)。
innerWidth和innerHeight表示视窗的大小(resizeTo()和resizeBy()表示改变视窗的方法)。
open()和close()方法表示打开和关闭某一URL的方法。
setTimeout()和setInterval()表示延时调用和间歇调用方法(毫秒数表示此毫秒后将任务添加到任务队列)。
alert()、confirm()和prompt()为系统弹出提示框方法。

对象：
location对象：是window的属性，也是document的属性，即为应用同一属性。
https://test.com.cn:8080/search/#info?wd=javascript(protocol「https：」、host「test.com.cn:8080」、hostname「test.com.cn」、port『8080』、pathname「search」、hash『info』、search「?wd=javascript」、href『完整url』和assign()、replace()、reload(),八个属性三个方法)。
navigation对象：记录浏览器相关参数。
screen对象：记录显示器相关参数。
history对象：go()、back()、forward()方法。

weixin_33778778

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的组成结构梳理

JavaScript经历了残酷的竞争，至今已经统治了web世界，现在系统梳理一下相关的知识。JavaScript可以分为三部分：ECMAScript、DOM和BOM。一、ECMAScript是JavaScript的核心,规定了这门语言的数据、语法、结构等基本概念。Global是ECMAScript最顶级的对象(兜底对象),但体现在代...
复制链接

扫一扫

JavaScript的组成结构梳理

“相关推荐”对你有帮助么？