摘要:也就是说,只要浏览器开始载入文档,这个对象就开始存在了,可以直接调用。属性返回该对象的所有子节点。第一个子节点是,表示文档类型节点。第二个子节点是,表示元素节点,代表。是在对象中创建一个对象,要与或方法联合使用。
赞助我以写出更好的文章,give me a cup of coffee?
2017最新最全前端面试题
在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是document 对象及其部件进行的,因此document对象是一个比较重要的对象。
document对象概述document对象是文档的根节点,window.document属性就指向这个对象。也就是说,只要浏览器开始载入HTML文档,这个对象就开始存在了,可以直接调用。
document.childNodes属性返回该对象的所有子节点。对于HTML文档来说,document对象一般有两个子节点。
第一个子节点是document.doctype,表示文档类型节点(DocumentType)。对于HTML5文档来说,该节点就代表。
第二个子节点是document.documentElement,表示元素节点(Element),代表:。
document 对象的属性document对象主要有如下属性:
属性 | 说明 |
---|---|
document.title | 设置文档标题等价于HTML的 |
document.bgColor | 设置页面背景色 |
document.linkColor | 未点击过的链接颜色 |
document.alinkColor | 激活链接(焦点在此链接上)的颜色 |
document.fgColor | 设置前景色(文本颜色) |
document.vlinkColor | 已点击过的链接颜色 |
document.URL | 设置URL属性从而在同一窗口打开另一网页 |
document.fileCreatedDate | 文件建立日期,只读属性 |
document.fileModifiedDate | 文件修改日期,只读属性 |
document.fileSize | 文件大小,只读属性 |
document.cookie | 设置和读出cookie |
document.charset | 设置字符集 简体中文:gb2312 |
document.doctype // document.documentElement //返回文档的根节点 ... document.head // ... document.body // ... document.defaultView // window document.querySelector("textarea").focus(); document.activeElement //
querySelector返回的是一个对象,而querySelectorAll返回的一个集合(NodeList)。IE8以上支持
详见:W3C selector API
指向特定元素集合的属性document.all :文档中所有的元素,Firefox不支持该属性。 document.forms :所有的form元素。 document.images:所有的img元素。 document.links:所有的a元素。 document.scripts:所有的script元素。 document.styleSheets:所有的link或者style元素。对象方法:
方法 | 说明 |
---|---|
document.write() | 动态向页面写入内容 |
document.createElement(Tag) | 创建一个html标签对象 |
document.getElementById(ID) | 获得指定ID值的对象 |
document.getElementsByTagName(tagname) | 获得指定标签名的对象 |
document.getElementsByName(Name) | 获得指定Name值的对象 |
document.getElementsByClassName(classname) | 获得指定类名的对象(html5 API) |
getElementById(id)方法返回一个对象,该对象对应着文档里一个特定的元素节点。
getElementsByTagName()方法将返回一个对象数组,他们分别对应着文档里一个特定的元素节点
write()和writeln()方法:区别在于后者在传送到文档中的字符串末时附加一个回车符。
querySelector方法的参数使用CSS选择器语法,getElementById方法的参数是HTML标签元素的id属性。
document.querySelector("li") document.getElementById("last")
如果有多个节点满足querySelector方法的条件,则返回第一个匹配的节点。
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。
其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
body-主体子对象document.body //指定文档主体的开始和结束等价于body>/body> document.body.bgColor //设置或获取对象后面的背景颜色 document.body.link //未点击过的链接颜色 document.body.alink //激活链接(焦点在此链接上)的颜色 document.body.vlink //已点击过的链接颜色 document.body.text //文本色 document.body.innerText //设置body>…/body>之间的文本 document.body.innerHTML //设置body>…/body>之间的HTML代码 document.body.topMargin //页面上边距 document.body.leftMargin //页面左边距 document.body.rightMargin //页面右边距 document.body.bottomMargin //页面下边距 document.body.background //背景图片 document.body.appendChild(oTag) //动态生成一个HTML对象常用对象事件
document.body.onclick=”func()” //鼠标指针单击对象是触发 document.body.onmouseover=”func()” //鼠标指针移到对象时触发 document.body.onmouseout=”func()” //鼠标指针移出对象时触发图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本 document.getElementById(”ID”).innerHTML //动态输出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById(”ID”).outerHTML //同innerHTML
看如下例子:
思维导图hello world!你好
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87622.html
摘要:超详细并且带的跨域指南来了本文基于你了解的同源策略,并且了解使用跨域跨域的理由。使用方法就是将符合上述条件页面的设置为同样的二级域名。这两个网站都是协议,端口都是,且二级域名都是。 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由。 1. JSONP 首先要介绍的跨域方法必然是 JSONP。 ...
摘要:有级级级共个级别。事件类型事件类型鼠标事件键盘事件事件事件处理器执行代码的程序在事件发生时会对事件做出响应。在标签中使用事件处理器的语法是标签事件处理器代码事件处理程序事件就是用户或浏览器自身执行的某种动作。 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可...
摘要:响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果,解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门 事件 JavaScript与HTML之间的交互是通过事件实现的...
摘要:布尔值表示捕获阶段调用事件处理程序,表示冒泡阶段通过对象的方法,也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是,当设置成时用以取消事件的默认行为与中的相同。 其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做...
摘要:理解的函数基础要搞好深入浅出原型使用原型模型,虽然这经常被当作缺点提及,但是只要善于运用,其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法,包括,,。商业转载请联系作者获得授权,非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端,因此文中只看懂了 8 成左右,希望能够给大家带来帮助....(据说是阿里的前端妹子写的) this 的值到底...
阅读 3469·2023-04-25 21:43
阅读 3096·2019-08-29 17:04
阅读 796·2019-08-29 16:32
阅读 1533·2019-08-29 15:16
阅读 2142·2019-08-29 14:09
阅读 2731·2019-08-29 13:07
阅读 1622·2019-08-26 13:32
阅读 1320·2019-08-26 12:00