选项有onready onchange onload ?
Onready是先于onload执行的,onload是要等所有元素包括img之类的加载完成之后才会执行的,而onready是只要DOM结构绘制完成就能执行。如果有多个onload函数,它只会执行最后一个函数,而onready是有多少个执行多少个。
不过onready好像是jq里的…
status
可不可以多次给DOM对象添加监听事件?
是可以的。(简述:一个监听对象一般只会有一个监听事件,多余的会移除
掉)
可以删除DOM对象的监听事件吗?
removeEvent。
是可以的,form可以包含包括input,文本,单选,复选,textarea等
什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个IP地址,也非同源。
同源策略限制以下几种行为:
cookie、localStorage 和 indexDB 无法读取
DOM 和 Js对象无法获得 ajax 请求不能发送
1、 通过jsonp跨域
jsonp的原理:
script 标签的src属性可以跨域引用文件,jsonp是请求之后后台包装好一段json,并且把数据放在一个callback函数,返回一个js文件,动态引入这个文件,下载完成js之后,会去调用这个callback,通过这样访问数据。
在浏览器端定义一个回调函数,并将函数名通过src传至服务器端;服务器端将数据包装成为一段js数据,并返回js函数格式的js文件,接着拿到这个js文件之后函数自动调用,拿到后端返回的数据
JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。
JSONP实现跨域请求的原理简单的说,就是动态创建
JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建标签,设置其src,回调函数在src中设置:
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。
function handleResponse(response){
// 对response数据进行操作代码
}
具体实现
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
JSONP目前还是比较流行的跨域方式,虽然JSONP使用起来方便,但是也存在一些问题:
首先, JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码
,而此时除了完全放弃 JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的 Web 服务时,一定得保证它安全可靠。
其次,要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给元素新增了一个 onerror事件处理程序,但目前还没有得到任何浏览器支持。为此,开发人员不得不使用计时器检测指定时间内是否接收到了响应。
2、 document.domain + iframe跨域
大大的前提:只有主域名相同的情况下方可使用此方法
什么是主域名相同呢?
huhu.com , a.huhu.com , b.a.huhu.com 这是三个不同的域名,但是主域名是相同的 都是 huhu.com, 不是这种形式的那么都不能用此方法
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
普通跨域请求:只服务端设置Access-Control-Allow-Origin
即可,前端无须设置,若要带cookie请求:前后端都需要设置。
CORS即“跨域资源共享”,这是一种最常用的跨域实现方式,一般需要后端人员在处理请求数据的时候,添加允许跨域的相关请求头信息
。大致思路是这样的:首先获取请求对象的信息,比如Origin字段,通过预先配置的参数判断请求是否合法,然后设置相应对象response的头信息,实现跨域资源请求。
需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。如果想实现当前页cookie的写入,可参考:nginx反向代理中设置proxy_cookie_domain 和 NodeJs中间件代理中cookieDomainRewrite参数的设置。
具体可看
https://blog.csdn.net/qq_17175013/article/details/88984274
目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。
7、 nginx代理跨域
nginx反向代理接口跨域
跨域原理: 同源策略是浏览器
的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口
只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
实际上,请求已经到达服务器了,只不过在回来的时候被浏览器限制了。
代理
所谓代理就是在我们和真实的服务器之间有一台代理服务器,我们所有的请求都是通过它来进行转接的。
正向代理
正向代理就是我们访问不了Google,但是我在国外有一台vps,它可以访问Google,我访问它,叫它访问Google后,把数据传给我。
反向代理
大家都有过这样的经历,拨打10086客服电话,可能一个地区的10086客服有几个或者几十个,你永远都不需要关心在电话那头的是哪一个,电话那头总会有人会回答你,只是有时慢有时快而已。那么这里的10086总机号码就是我们说的反向代理。客户不知道真正提供服务人的是谁。
反向代理隐藏了真实的服务端
,当我们请求 www.baidu.com 的时候,就像拨打10086一样,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器,用来做负载均衡
。
总结
正向代理隐藏了真实的客户端。
反向代理隐藏了真实的服务器。
Nginx(发音同engine x)是一个Web服务器
具体可看
https://www.cnblogs.com/ddlove/p/9945988.html
实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
8、WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,允许服务器端主动向浏览器端发送消息。
网页可见区域宽:document.body.clientWidth是。缩放会使其变化
网页可见区域高: document.body.clientHeight;
**网页可见区域宽: document.body.offsetWidth(包括边线的宽);
网页可见区域高: document.body.offsetHeight(包括边线的宽);
padding,margin都会让上面的属性变化
网页正文全文高: document.body.scrollHeight;
(里面最高的div的高度加border+padding+margin)同理还有scrollwidth
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
【页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop。
页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop。】
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
layout viewport:
layout viewport 是网页的所有内容,他可以全部或者部分展示给用户。
visual viewport
visual viewport 就是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页。
前端优化的目的
优化可以使页面加载的更快,用户体验更加流畅,提升用户体验度。
优化可以有效的减少带宽,减少HTTP请求,减轻服务器压力,节省资源。
优化方式
从HTTP请求方面优化
合并压缩CSS样式;
合并压缩JS文件;
使用Sprites雪碧图;
使用base64格式的图片,将图片内嵌到页面中;
图片懒加载
JS文件放置在body底部或者异步加载;
对JS文件实行懒加载;
将CSS文件放置在head内,保证用户体验;
避免多页面之间的重复资源引用;
减少不必要的HTTP跳转或重定向;
使用CDN来代替本地静态资源;
使用gzip压缩。
从代码方面优化
避免在document上直接进行频繁的DOM操作
使用classname代替大量的内联样式修改
对于复杂的UI元素,设置position为absolute或fixed
尽量使用css动画
使用requestAnimationFrame代替setInterval操作
适当使用canvas
尽量减少css表达式的使用
使用事件代理?什么是事件代理
避免图片或者frame使用空src
在css属性为0时,去掉单位
禁止图像缩放
正确的css前缀的使用
移除空的css规则
对于css中可继承的属性,如font-size,尽量使用继承,少一点设置
缩短css选择器,多使用伪元素等帮助定位
冒泡:点击div会触发父盒子上的监听事件
从内层捕获
<div class="classv">
我是祖宗
<div class="actva">我是老爸
<div class="foo">我是孩子</div>
</div>
</div>
<script type="text/javascript">
var a = document.querySelector('.classv').addEventListener('click', function() {
console.log('我是祖宗')
}, false)
var b = document.querySelector('.actva').addEventListener('click', function() {
console.log('我是老爸')
}, false)
var c = document.querySelector('.foo').addEventListener('click', function() {
console.log('我是孩子')
}, false)
</script>
注意: addEventListener中有三个属性,第三个属性是布尔值。
默认属性是 false为事件冒泡,true 为事件捕获
阻止默认行为
<body>
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body>
<script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
alert("不跳转!")
}
</script>
关于事件流
什么是事件委托?
事件委托,又称事件代理,就是将元素的事件处理交由父元素或者祖先元素来代为执行;
事件委托利用了事件冒泡
,只指定一个事件处理程序(函数),就可以管理某一类型的所有事件
。
例如:我们只需要在document上绑定一个onclick事件,就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件,而不必给每一个元素去绑定onclick事件;当然这只是举个栗子,我们正常情况下绝对不会这么去做的。
为什么要用事件委托?
在javascript进行事件处理的时候,每个添加到页面上的事件函数都将直接影响页面的整体性能,每一个函数都是一个对象,都会占用内存,而内存中的对象越多,性能就越差。而为了解决这种问题,我们就需要使用事件委托。
事件委托的优点
只在内存中开辟了一块空间,节省资源同时减少了dom操作,提升整体性能;
在页面中设置事件处理程序的时间大大减少了;
对于新添加的元素也会有之前的事件;
不需要对事件委托的元素手动移除事件处理程序。
事件委托的使用
在我们给元素添加事件的时候,在没有事件委托时,我们需要获取所有元素并遍历,给每个元素添加一个删除事件。达到删除对应行的效果。
而这种添加事件的方式,很容易导致的问题就是之后追加的元素没有对应的事件。
对于上述的,如在事件绑定之后追加元素的、通过ajax渲染数据等,都可以通过事件委托来实现。
不使用事件委托时:
let myTable = document.getElementById('table');
let myTBody = myTable.getElementsByTagName('tbody')[0];
let myBtn = document.getElementById('btn');
let delBtns = myTBody.getElementsByTagName('button');
let id = 2;
for(let i = 0; i < delBtns.length; i++) {
delBtns[i].onclick = function() {
let tr = this.parentNode.parentNode;
myTBody.removeChild(tr);
}
}
事件委托的实现
将button的事件代理到table
上,在事件处理程序内部通过event事件对象的target属性配合switch语句来确保当前点击的是button,当点击button的时候,执行删除操作;这里用switch的原因是为了还可以再同时判断多个target
当然了,实际使用的时候,我们一般不使用target.tagName,因为直接使用标签名容易导致冲突,所以我们实际使用时一般都使用className来进行判断
myTable.onclick = function(e) {
let event = e || window.event;
let target = event.target || event.srcElement;
//这两行应该是用来解决兼容性问题的
let tagName = target.tagName;
switch (tagName) {
case 'BUTTON':
let myTr = target.parentNode.parentNode;
myTr.parentNode.removeChild(myTr);
break;
default:
break;
}
/* 假设当前删除按钮的类名为del
let className = target.className;
switch (className) {
case 'del':
let myTr = target.parentNode.parentNode;
myTr.parentNode.removeChild(myTr);
break;
default:
break;
}
*/
};
关于事件委托
加强语义化
在html5中,新增了几个语义化标签:
<article>、<section>、<aside>、<hgroup>、
<header>,<footer>、<nav>、<time>、<mark>、
<figure> 和<figcaption>
等。
1.什么是HTML语义化?
通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据
判断内容是段落、标签是输入框等。
为什么要语义化?
1).去掉或样式丢失的时候能让页面呈现清晰的结构
2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
3).有利于SEO
搜索引擎优化
4).便于团队开发和维护,遵循W3C标准,可以减少差异化
3.如何确定你的标签是否语义良好?
去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
DTD的是W3C所发布的一个文档类型定义,简单的说,就是告诉浏览器你的这个HTML,是根据那个标准写的,解析的时候用哪个标准解析。
HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
Doctype作用,标准模式和兼容模式有什么区别
声明位于位于HTML文档中的第一行,处于 html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
具体区别:
盒模型
在严格模式中 :width 是内容宽度 ,元素真正的宽度 = width;
在兼容模式中 :width 则是 = width+padding+border
兼容模式下可设置百分比的高度和行内元素的高宽
在标准模式下,给 span 等行内元素设置 wdith 和 height 都不会生效,而在兼容模式下,则会生效。
在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)
body{text-align:center};#content{text-align:left}
兼容模式下Table中的字体属性不能继承上层的设置
,white-space:pre会失效,设置图片的padding会失效
** html第一行!doctype**
声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在H5中只有一种:HTML
新特性
绘画 canvas,svg;
用于媒体播放的的 video(视频) 和 audio(音频) 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 存储会话级数据,数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如 article、footer、header、nav、section;
新增的表单控件,calendar、date、time、email、url、search;
新增的表单属性, form、formtarget、autofocus、required、placeholder、autoComplete、pattern
新的技术webworker(js创建的多线程环境), websocket(前后端通讯协议,允许后端主动发送消息), Geolocation(地理位置);
兼容性问题
通过document.createElement方法可以创建HTML5新标签,但是创建的标签需要提前添加标签默认的样式。
也可以通过各种框架实现
区分HTML和HTML5
通过文档声明来区分
HTML5字符编码格式通过 来指定
通过HTML5新增的标签来区分
document.querySelector()和document.querySelectorAll()方法
document.querySelector()
:根据css选择器返回第一个匹配的元素,如果没有匹配返回null;
document.querySelectorAll("selector")
:querySelectorAll返回的是元素数组,querySelector返回的是一个元素。如果querySelectorAll没有匹配的内容返回的是一个空数组。
classList 属性
add(value)
:将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
contains(value)
:表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove(value)
:从列表中删除给定的字符串。
toggle(value)
:如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
自定义数据属性(data-属性)
HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。
可以通过 元素.dataset.
属性来获取。
<div id="myDiv" data-id="12345" data-name="myDiv">div>
<script>
// 本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
// 取得自定义属性的值
let divId = div.dataset.id; // 12345
let myName = div.dataset.name; // myDiv
// 设置值
div.dataset.id = 23456; // 23456
div.dataset.name = "hello world!"; // hello world!
script>
outerHTML属性
在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。
在写模式下,outerHTML会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。
<ul id="list">
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
ul>
<script>
let list = document.querySelector('#list');
const oldHTML = list.outerHTML; // 返回 ul + li *3+内容
list.outerHTML = '替换内容
'; // 将list整个替换成为当前的内容标签
script>
insertAdjacentHTML()方法
新增的插入标签元素的方法,它接收两个参数:插入位置和要插入的HTML 文本。
let div = document.querySelector('div');
//作为前一个同辈元素插入
div.insertAdjacentHTML("beforebegin", "<p>Hello world!p>");
//作为第一个子元素插入
div.insertAdjacentHTML("afterbegin", "<p>Hello world!p>");
//作为最后一个子元素插入
div.insertAdjacentHTML("beforeend", "<p>Hello world!p>");
//作为后一个同辈元素插入
div.insertAdjacentHTML("afterend", "<p>Hello world!p>");
webStorage浏览器存储
canvas 画布
fetch 与后台通信的新API,类似于ajax
history 历史记录API。通过history可以实现前端路由
webscoket 前后端双向通信
geolocation 地理定位API
exitFullscreen 全屏API
video/audio 视频/音频API
draggable 拖拽API
visibilitychange 页面可见性API
cookie, sessionStorage ,localStorage, indexDb按设定的时间内有效,最多4k, 两个storage都是html5新api,存储键值对,
sessionStorage会话存储,页面访问时间内有效,
关闭页面失效,localStorage一直有效,关闭页面不会失效,
两个都是最大5M,
indexdb也是h5新api,浏览器内置小型数据库。
localStorage生命周期是永久
,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
sessionStorage仅在当前会话下有效
,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。
作用域不同
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage
(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制(各浏览器不同),一般不能超过20个。与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装,源生的Cookie接口不友好(http://www.jb51.net/article/6… )。
cookie的优点:具有极高的扩展性和可用性
1.通过良好的编程,控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术,减少cookie被破解的可能性。
3.只有在cookie中存放不敏感的数据,即使被盗取也不会有很大的损失。
4.控制cookie的生命期,使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。
cookie的缺点:
1.cookie的长度和数量的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB。否则会被截掉。
2.安全性问题。如果cookie被人拦掉了,那个人就可以获取到所有session信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务端保存一个计数器。若吧计数器保存在客户端,则起不到什么作用。
localStorage、sessionStorage、Cookie共同点:都是保存在浏览器端,且同源的。
https://www.jianshu.com/p/fb666b7c11c4
简洁回答:
DNS 解析:将域名解析成 IP 地址
TCP 连接:TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接:TCP 四次挥手
status
document.ready和onload的区别为:加载程度不同、执行次数不同、执行速度不同。
一、加载程度不同
document.ready:在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
onload:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。
二、执行次数不同
document.ready可以写多个.ready,可以执行多次,第N次都不会被上一次覆盖。
onload只能执行一次,如果有多个,那么第一次的执行会被覆盖。
三、执行速度不同
onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。
document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。
style标签写在body前和body后有什么区别
body后的style标签的优先级要高于body前的style标签
写在body标签后由于浏览器以逐行方式对html文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在IE浏览器下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)
创建节点
document.createDocumentFragment(); // 创建一个空的虚拟节点,一个DOM片段
document.createEelement(TagName); // 创建指定的DOM节点
document.createTextNode(); // 创建一个文本节点
document.createAttribute(); // 创建一个属性节点
document.createComment(); // 创建一个注释节点
删除(移除)节点
parentNode.removeChild('需要删除的子节点'); // 删除,利用父元素节点删除子节点
element.remove(); // 删除自身,兼容性不好
添加节点
parentNode.appendChild('子节点'); // 给父元素节点添加子节点
parentNode.append('节点','节点','节点','···'); // 添加子节点,参数可以是多个节点,兼容性不好
parentNode.insertBefore('新节点', '旧节点'); // 将一个新节点插入到一个旧节点之前。
替换节点
parentNode.replaceChild('新节点', '旧节点'); // 调用父节点的方法,用一个新节点替换掉一个旧节点
复制节点
element.cloneNode('布尔值');
// 克隆节点。如果参数为true的话,会递归复制当前元素的所有子孙节点。否则的话只复制当前节点本身。
查找节点
通过document查找。
document.getElementById(); // 通过ID查找DOM元素;
document.getElementsByTagName(); // 通过标签选择器查找DOM元素;可以是 '*',返回当前所有的DOM节点。
document.getElementsByClassName(); // 通过class类名查找DOM元素;返回一个NodeList伪数组。
document.getElementsByName(); // 通过name属性查找DOM元素;返回所有name符合的元素。
document.querySelector(); // HTML5新增,通过CSS选择器选择元素,返回匹配的第一个元素。
document.querySelectorAll(); // HTML5新增,通过CSS选择器选择元素,返回匹配的所有元素组成的NodeList。
document.forms; // 返回当前文档中的所有form表单。
document.images; // 返回当前文档中的所有img图片。
document.scripts; // 返回当前文档中所有的script脚本。
document.activeElement; // 返回当前获取焦点的节点。
document.documentElement; // 返回当前文档的根节点。
document.body; // 返回当前文档的body节点。
通过element查找。
element.childNodes; // 返回当前节点的所有子节点(包括文本节点和空白节点)。
element.children; // 返回当前节点的所有子元素节点。
element.firstChild; // 返回当前节点的第一个子节点(包括空白节点,文本节点)。
element.firstElementChild; // 返回当前节点的第一个元素节点。
element.lastChild; // 返回当前元素的最后一个子节点(包括空白节点,文本节点)。
element.lastElementChild; // 返回当前节点的最后一个元素节点。
element.nextSibling; // 返回当前节点的下一个兄弟节点(包括空白节点,文本节点)。
element.nextElementSibling; // 返回当前节点的下一个兄弟元素节点。
element.previousSibling; // 返回当前节点的上一个兄弟节点(包括空白节点,文本节点)。
element.previousElementSibling; // 返回当前节点的上一个兄弟元素节点。
element.parentNode; // 返回当前节点的父节点。
element.parentElement; // 返回当前节点的父元素节点。 // IE9以下不兼容。
url