iOS 中JavaScript交互 Document对象详解
来源:互联网 发布:网络推广的职业规划 编辑:程序博客网 时间:2024/06/04 17:48
javascript
代码来实现的,而完成这些交互工作大多数是document
对象及其部件进行的,因此document
对象是一个比较重要的对象。document对象概述
document
对象是文档的根节点,window.document
属性就指向这个对象。也就是说,只要浏览器开始载入HTML
文档,这个对象就开始存在了,可以直接调用。
document.childNodes
属性返回该对象的所有子节点。对于HTML文档来说,document
对象一般有两个子节点。
第一个子节点是document.doctype
,表示文档类型节点(DocumentType)。对于HTML5文档来说,该节点就代表<!DOCTYPE html>
。
第二个子节点是document.documentElement
,表示元素节点(Element),代表:<html lang="en">。
document 对象的属性
document
对象主要有如下属性:
指向其他节点或对象的属性
document.doctype // <!DOCTYPE html>document.documentElement //返回文档的根节点 <html>...</html>document.head // <head>...</head>document.body // <body>...</body>document.defaultView // windowdocument.querySelector('textarea').focus();document.activeElement // <textarea>
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元素。
对象方法:
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 //动态输出HTMLdocument.getElementById(”ID”).outerText //同innerTextdocument.getElementById(”ID”).outerHTML //同innerHTML
看如下例子:
<p>hello world!<span>你好</span></p><script> var p = document.getElementsByTagName('p');//集合// alert(p[0].textContent);//firefox// alert(p[0].innerText);//IE alert(p[0].innerHTML);//hello world!<span>你好</span> alert(p[0].outerHTML);//<p>hello world!<span>你好</span></p> alert(p[0].textContent);//hello world!你好</script>
思维导图
- iOS 中JavaScript交互 Document对象详解
- javascript中document对象详解
- javascript-document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- Javascript - document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- javaScript document对象详解
- SQL 之 case when
- 解决一个ios 短信格式问题(http:// 会导致本来一条短信被识别为两条短信)
- java安全沙箱(三)之内置于Java虚拟机(及语言)的安全特性
- 一些小东西
- android 自定义Preference(APIDemons中自定义Preference解析)
- iOS 中JavaScript交互 Document对象详解
- 用python实现一个简单的脚本——文件类型转换
- Virtualenv + TensorFlow
- Ubuntu安装flash
- Longest Common Subsequence.
- 阿里云服务器部署FTP服务(CentOS 7.3 64位,以vsftpd为例)
- 11.11/11.12 Java作业
- 实习僧产品体验报告——“尊重用户体验,才能取得用户尊重”
- 如何集成移动端车牌识别算法