知识林
当前位置:知识林 » 网站前端开发 » HTML_DOM » JavaScript Document对象

JavaScript Document对象

来源: 知识林

document 对象的属性

属性说明
document.title设置文档标题等价于HTML的<title>标签
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.referrer返回载入当前文档的文档的 URL。
document.domain返回当前文档的域名。
document.lastModified返回文档被最后修改的日期和时间。

document 指向特定元素集合的属性

属性说明
document.all文档中所有的元素,Firefox不支持该属性。
document.forms所有的form元素。
document.images所有的img元素。
document.links所有的a元素。
document.scripts所有的script元素。
document.styleSheets所有的link或者style元素。

document 对象方法

属性说明
document.write()动态向页面写入内容
document.writeln()动态向页面写入内容,在字符串最后一个字符后附加一个回车符
document.open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
document.createElement(Tag) 创建一个html标签对象 ,要与appendChild() 或 insertBefore()方法联合使用
document.getElementById(ID)方法返回一个指定ID值的对象,该对象对应着文档里一个特定的元素节点。
document.getElementsByTagName(tagname)方法将返回一个对象数组,他们分别对应着文档里一个特定的元素节点
document.getElementsByName(Name)获得指定Name值的对象
document.getElementsByClassName(classname)获得指定类名的对象(html5 API)
//get elements with "cats" class name
document.getElementsByClassName("cats")
//get elements with "cats" or "dogs" class names (inclusive)
document.getElementsByClassName("cats dogs")

document 指向其他节点或对象的属性

属性说明
document.doctype <!DOCTYPE html>
document.documentElement返回文档的根节点 <html>...</html>
document.head <head>...</head>
document.body <body>...</body>
document.defaultView window
document.activeElement<textarea>
document.querySelector('textarea').focus();querySelector返回的是一个对象,而querySelectorAll返回的一个集合(NodeList)。
参数使用CSS选择器语法
IE8以上支持

document querySelector 实例

document.querySelector('#myheader') returns the element with ID="myheader"
document.querySelector('p.description') returns the P with class="description" element
document.querySelector('#content img:nth-of-type(1)') returns the 1st image within container "#content"
document.querySelector('#myform input[type="radio"]:checked') selects the checked radio button within "#myform"
document.querySelector('form[action="feedback.php"]') references form with action="feedback.php"
document.querySelector('img[src^="http"]') selects 1st image with src beginning with "http"
document.querySelector('img[src$="blank.gif"]') selects 1st image with src ending in "blank.gif"
document.querySelector('#biography, #gallery') returns either element "#biography" or "#gallery", depending on which one is found first within document tree
<div id="outerdiv" style="padding: 50px; width: 100px; height: 100px; border: 1px solid black">
    <div id="innerdiv" style="width: 100%; height: 100%; border: 1px solid black; background: silver;"></div>
</div>
<script type="text/javascript">
    if (document.querySelector) {
        var outerdiv = document.querySelector('#outerdiv')
        outerdiv.onmouseover = function () {
            this.querySelector('#innerdiv').style.background = "yellow";
        }
        outerdiv.onmouseout = function () {
            this.querySelector('#innerdiv').style.background = "silver";
        }
    }
</script>
<form id="myform">
    <b>Your hobbies:</b><input name="hobbies" type="checkbox" value="movies" />Movies
    <input name="hobbies" type="checkbox" value="sports" />Sports
    <input name="hobbies" type="checkbox" value="reading" />Reading
    <input name="hobbies" type="checkbox" value="sleeping" />Sleeping
    <br />
    <input type="submit" />
</form>
<script type="text/javascript">
    if (document.querySelector) {
        document.querySelector('#myform').onsubmit = function () {
            var checkedhobbies = this.querySelectorAll('input[name="hobbies"]:checked')
            for (var i = 0; i < checkedhobbies.length; i++) {
                alert(checkedhobbies[i].value)
            }
            return false
        }
    }
</script>

document 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
看如下例子: <p>hello world!<span>你好</span></p> <script type="text/javascript">     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>

今天

Copyright © 知识林 All Rights Reserved.   吉ICP备13001611号-1