document常用api

主要是为了记忆和理解而写的博客,自己比较笨,所以必须手打一遍才能记住
备用的资料了
偶尔看到大佬的window对象:https://blog.csdn.net/u012681635/article/details/81194990

属性

首先罗列一些已经不建议使用的属性了,已经被web标准废除的
原来网站: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/body

属性名 用法 作用 备注
body document.body 返回当前文档中的<body>元素或者<frameset>元素
characterSet document.characterSet 查看当前文档的字符集
childElementCount var foo = document.getElementById(‘parent’);
foo.childElementCount
只读属性返回一个无符号长整型数字,表示给定元素的子元素数
children var foo = document.getElementById(‘parent’);
foo.children
返回元素下所有子元素数组,是一个live的htmlCollection,可以进行一些修改,会直接修改
compatMode document.compatMode 表明是混杂模式backCompat还是标准模式CSS1Compat
contentType document.contentType 该属性的返回值是浏览器检测到的,不一定是直接读取HTTP响应头中的或者HTML中meta标签指定的值, 仅gecko支持(火狐浏览器支持)
currentScript document.currentScript.async 返回其所包含的脚本中正在被执行的 <script> 元素. 如果当前正在执行的代码是处在某个回调函数或者事件处理函数中的,那么 currentScript 属性不会指向包含那个函数的 <script> 元素,而是会返回 null
defaultView document.defaultView 该属性返回当前 document 对象所关联的 window 对象,如果没有,会返回 null
designMode document.designMode = “on”/“off” 控制整个文档是否可编辑 文档是可以编辑了,但是一刷新又没了,仅提供娱乐了
dir document.dir = ‘rtl’/‘ltr’ 控制文字排版,左到右或者右到左 找了个网站试了一下,排版颠倒了但是文字的顺序其实并没有从右到左,可能后面加载进来的数据不受控制
doctype document.doctype 返回前文档关联的文档类型定义 尝试了一下,出来的是<!doctype html>
docmentElement document.docmentElement 返回文档对象(document)的根元素的只读属性,使用这个只读属性能很方便的获取到任意文档的根元素 尝试了一下把整个html都获取到了
documentURI document.documentURI 以字符串的形式返回文档的位置(location),HTML 文档有一个 document.URL 属性返回同样的值。但是不像 URL,documentURI 适用于所有类型的文档 尝试了两个线上网站,把当前地址栏url给打出来了
domain document.domain 获取/设置当前文档的原始域部分, 用于 同源策略
embeds document.embeds 返回文档中<embed> 的html的元素列表 可能运用<embed>标签的网站不是很多,尝试了打印出来的只有 HTMLCollection []
firstElementChild ParentNode.firstElementChild 只读属性,返回对象的第一个孩子 Element, 如果没有子元素,则为null IE系列和safri系列不支持这个属性,官网提供了polyfill策略
forms document.forms 返回当前的form元素的一个集合,还是一个HTMLCollection对象 到处都能看见这个HTMLCollection对象,暂时就认为是一个对象, 打印出来的form非常齐全,包含了整个事件
moz​Full​Screen​Enabled document.moz​Full​Screen​Enabled 返回一个bool值,看浏览器是否支持全屏模式 属性名称总让我觉得和火狐浏览器兼容有什么关系, 谷歌浏览器难道是不支持全屏的么,返回了一个undefined给我,我能想到的应用场景就是网站看电影小说等全屏,
但是打开了视频网站之后发现是可以全屏的啊
head document.head 返回文档的<head>标签里的内容,不能赋值,任何赋值只能静默失败,严格模式报错
hidden document.hidden 表明页面是出现还是隐藏 只读属性并不能在控制台修改, 网上对于这个的挺多例子是用来监听,让我想到了关于百度点击搜索框跳转新页面的案例
images document.images 返回了页面中所有的image元素 成功收获自己的头像链接,感觉在其他地方也可以引用了
implementation document.implementation 返回了一个与当前文档有关的DOMimplementation对象 打印出来的都是 DOMimplementation {} ,可能不常用这个对象了
lastElementChild ParentNode.lastElementChild 返回元素的最后一个子元素 这个和之前的firstElementChild是一个系列的啊,缺点也一样,IE和safri系列均不支持,文档同样给出了polyfill
last​Modified document​.last​Modified 返回文档最后被修改的日期和时间 然后我打印了几个网站的时间,发现返回的都是当前时间,这个还需要研究一下下
last​Style​SheetSet document.last​Style​SheetSet 返回最后一个启用的样式表集合 打印出来还是undefined , 和前面的moz​Full​Screen​Enabled一样
links document.links 返回一个文档中所有具有 href 属性值的 元素与 元素的集合 打印了一个网站,看到一个 HTMLCollection [149]的值…
location document.location 返回一个 Location 对象,包含有文档的 URL 相关的信息,并提供了改变该 URL 和加载其他 URL 的方法 控制台修改location, 赋予了一个新的字符串网址,打开了新界面
onanimationcancel target.onanimationcancel = function(){} 这个事件在css animation属性中断时派发出来 有待确认
onanimationend target.onanimationend = function(){} 有待确认
onblur target.onblur =function(){} 页面元素失去焦点是被触发 尝试了挺久终于成功
oncancel target.oncancel = function(){} 暂时无解,和我印象中理解的不一样
oncanplay element.oncanplay 当用户代理能够播放媒体时canplay 事件被触发 , 但是预估没有加载全部的数据以支持媒体播放完毕 尝试了一下,在音频播放前,如果音频是可以被播放的状态,则会触发canplay
oncanplaythrugh element.oncanplaythrough 当用户代理可以播放媒体资源并且可以播放至其结束而不必进一步缓冲内容时,触发canplaythrough事件 不需要缓冲的资源,在播放前就已经全部加载好的
onchange element.onchange 当前值发生变化的时候触发的函数 是在blur事件触发之后才触发的事件,不能达到实时监听的效果
onclick element.onclick 该函数接收 MouseEvent 对象作为其唯一参数。在函数内,this 是触发当前事件的元素 this.value++
oncontextmenu window.oncontextmenu = function () {return false;} 禁用右键 能否单独禁用一块区域的右键点击尚有待实验,小实验似乎是不行的
ondbclick element.ondblclick = function 当发生双击事件的时候就能执行想对应绑定事件 发生双击事件时执行对应函数
ondurationchange element.ondurationchange ondurationchange 事件在视频/音频(audio/video)的时长发生变化时触发。 在视频/音频(audio/video)加载过程中,事件的触发顺序如下: onloadstart
ondurationchange
onloadedmetadata
onloadeddata
onprogress
oncanplay
oncanplaythrough
onended element.onended onended 事件在视频/音频(audio/video)播放结束时触发。该事件通常用于送类似"感谢观看"之类的消息。 有待实验
onerror element.onerror onerror 事件在视频/音频(audio/video)数据加载期间发生错误时触发。 影响媒体数据加载的相关事件有:onabort
onemptied
onstalled
onsuspend
onfocus target.onfocus 在元素获得焦点的时候触发 一般元素div一类的,可以添加tabindex属性,才能触发获得焦点的函数
onfullscreenchange
onfullscreenerror
ongotpointercapture target.ongotpointercapture 函数把整个获得焦点的元素当作参数 有待测试
oninput target.oninput oninput 事件在用户输入时触发。该事件在 或 元素的值发生改变时触发。 不同于onchange在blur之后才触发,这个只要值发生改变之后就会触发
onvalid form.onvaild 可以阻止报错信息? 有待实验,网上疑问看的我也是一愣一愣啊
onkeydown
onkeypress
onkeyup
onload window.onload, 通常用在body上 onload 事件会在页面或图像加载完成后立即发生 页面或图像加载完之后发生的
onloadedata target.onloadedata onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发 前面出现了,视频加载的一系列
onloadedmetadata target.onloadedmetadata onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。 视频音频加载一系列操作
onloadend img.onloadend 表示在引发loadend事件时(在加载资源时停止进度时)要调用的代码 界面友好性相关
onloadstart img.onloadstart 表示在引发loadstart事件时(在加载资源时已经开始进展)将要调用的代码 image.addEventListener(‘load’, function(e) {console.log(‘Image loaded’);});
image.addEventListener(‘loadstart’, function(e) {console.log(‘Image load started’);});
image.addEventListener(‘loadend’, function(e) {console.log(‘Image load finished’);});
onlostpointercapture 有待实验
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpointerover
onpointerup
onreset
onresize
onscroll
onselect
onsubmit
ontransitioncancel
ontransitionend
onwheel
plugins
policy
preferred​Style​SheetSet
ready​State
referrer
scripts
scrolling​Element
selected​Style​SheetSet
style​Sheet​Sets
title
URL
visibility​State

明天继续~

猜你喜欢

转载自blog.csdn.net/qq_34567015/article/details/89301123
今日推荐