JS的Document属性和方法

最新推荐文章于 2024-10-07 17:01:37 发布
最新推荐文章于 2024-10-07 17:01:37 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： java on the way
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linwei_hello/article/details/8504802
版权
JS的Document属性和方法

document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.charset //设置字符集 简体中文:gb2312
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie

———————————————————————
常用对象方法

document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
———————————————————————

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.οnclick=”func()” //鼠标指针单击对象是触发
document.body.οnmοuseοver=”func()” //鼠标指针移到对象时触发
document.body.οnmοuseοut=”func()” //鼠标指针移出对象时触发
———————————————————————
location-位置子对象

document.location.hash // #号后的部分
document.location.host // 域名+端口号//好像返回的是主机名localhost,没有返回端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
———————————————————————
selection-选区子对象
document.selection

例如：

<div>请选中这里的部分文字。</div>
<div><input type="button" value="请选中部分文字，然后点击这里执行 empty" οnclick="javaｓｃｒｉｐｔ:Foo();" /></div>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" language="javaｓｃｒｉｐｔ">
<!--
function Foo()
{
    document.selection.empty();
}
-->
</ｓｃｒｉｐｔ>


selection的createRange方法

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

这些好像都是只有在IE下才能实现。。

———————————————————————

images集合(页面中的图象)

a)通过集合引用
document.images //对应页面上的img标签
document.images.length //对应页面上img标签的个数
document.images[0] //第1个img标签
document.images[i] //第i-1个img标签

b)通过name属性直接引用
img name=”oImage”
document.images.oImage //document.images.name属性

c)引用图片的src属性
document.images.oImage.src //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示

———————————————————————-

forms集合(页面中的表单)

a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=”" //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
document.getElementId(”oDiv”) //通过getElementId引用对象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/


图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML




/* PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.01 数据压缩完整版 *\

　制作时间:2005-12-30
　更新时间:2006-01-24
　数据修正:2006-08-17
　文档大小:18KB
　演示地址:http://www.popub.net/script/PCAS.html
　下载地址:http://www.popub.net/script/PCASClass.js
　应用说明:页面包含<script type="text/javascript" src="PCASClass.js"></script>
	省市联动
		new PCAS("Province","City")
		new PCAS("Province","City","吉林省")
		new PCAS("Province","City","吉林省","吉林市")
	省市地区联动
		new PCAS("Province","City","Area")
		new PCAS("Province","City","Area","吉林省")
		new PCAS("Province","City","Area","吉林省","松原市")
		new PCAS("Province","City","Area","吉林省","松原市","宁江区")
	省、市、地区对象取得的值均为实际值。
	注：省、市、地区提示信息选项的值为""(空字符串)

　感谢
　　　网友418528#gmail.com对数据进行的核实工作 2006-08-07

\*** 程序制作/版权所有:崔永祥(333) E-Mail:zhadan007@21cn.com 网址:http://www.popub.net ***/


落落的天堂
关注
专栏目录
document.write()在JavaScript中怎样JSP调用
04-01
document.write()在JavaScript中怎样JSP调用
javascript 的Document属性和方法集合
10-29
以上是JavaScript中Document对象的一些关键属性和方法的介绍。通过这些属性和方法，开发者可以对网页进行丰富的动态操作，从而创建交互性更强的Web应用。了解这些属性和方法对于Web开发人员来说是非常重要的基础，它...
document 文挡对象 - JavaScript脚本语言描述
guang_ge的专栏
04-22 1242
document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息 “引用的元素为空或者不是对象/////”———————————————————————对象属性document.title //设置文档标题等价于HTML的title标签docum
javascript学习——Document 节点详解
最新发布
白话机器学习
10-07 725
document节点对象代表整个文档，每张网页都有自己的document对象。属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。document对象有不同的办法可以获取。正常的网页，直接使用document或。iframe框架里面的网页，使用iframe节点的属性。Ajax 操作返回的文档，使用对象的属性。内部节点的属性。document对象继承了接口和Node接口，并且混入（mixin）了ParentNode接口。这意味着，这些接口的方法都可以在。
JS document方法
zzzjx19970411的博客
07-22 3095
1、document.open()，document.close() document.open方法清除当前文档所有内容，使得文档处于可写状态，供document.write方法写入 内容。 document.close方法用来关闭document.open()打开的文档。 2、document.querySelector() document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果 有多个节点满足匹配条件，则返回第一个匹配的...
jsp中document.all的用法
weixin_34406086的博客
02-24 408
代码1: <input name=aaa value=aaa> <input id=bbb value=bbb> <script language=Jscript> alert(document.all.aaa.value) //根据name取value ...
HTML (jsp页面)Document 对象
韩猿外的博客
04-16 2574
HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 **提示：**Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 Document 对象集合 集合 描述 ...
JS的Document属性和方法小结
01-19
document.title //设置文档标题...document.vlinkColor //已点击过的链接颜色 document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期，只读属性 document.fileModifiedDate
JavaScript 节点操作 以及DOMDocument属性和方法
12-04
属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6...
JS document常用方法总结
weixin_43073143的博客
08-19 1284
document.getElementById(id); 返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); 返回带有指定名称的节点集合 document.getElementsByTagName(tagname); 返回带有指定标签名的对象集合 document.getElementsByClassName(classname); 返回带有...
JavaScript中document的四种方法
热门推荐
qiangzhogshou的博客
11-26 1万+
1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...
document.readyState等属性
hsany330的专栏
08-27 919
document.readyState:判断文档是否加载完成。firefox不支持。 这个属性是只读的，传回值有以下的可能： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 1-LOADING：加载程序进行中，但文件尚未开始解析。 2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 3-INTERACTIVE：仅对已加载的部分文件
JSP获取某个值document.getElementsByName("name")获取对应的value值
qq_41832185的博客
01-21 3630
document.getElementsByName(“name”).value; 像这样是获取不到值的，弹出的消息是 underfined： 原因： getElementById是element单数（ID属性为唯一值）， getElementsByName是elements复数（name属性可以重复）。 所以ByName返回的是数组类型，ById返回的是唯一值。 正确方法： var x=docu...
在浏览器上如何查看或更改页面编码模式
sworddancing is the best one
07-21 1万+
在浏览器上如何查看或更改页面编码模式 方法一： 大多说浏览器点点鼠标就能找到的，点击右上角的竖排的三个点或三条杠找到有工具字眼的选项打开，然后找编码很好找到，如果找不到编码，则用其他方法。 方法二： 点击键盘上的 F12 找到console（控制台），找到logs（调试界面），输入document.charset或者document.characterset就会返回编码类型，可能是“utf...
document对象常用属性及方法
一个九零后程序猿开发日志
07-02 1364
对象属性: document.title //设置文档标题等价于HTML的<title>标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)document.linkColor //未点击过的链接颜色document.alinkColor //激活链接(焦点在此链接上)的颜色document.vli...
JavaScript document对象
weixin_47782618的博客
04-23 3749
1. 什么是document对象 document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 2. document对象的属性 2.1 document.doctype document.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明
JS的Document类型
一心向晚
09-15 9445
Document HTMLDocument继承自Document。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用 1.属性 documentElement指向HTML页面中的<html>元素。 title 获取文档的标题 URL 获取URL domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL...
javascript中数据结构 Set的用法一
imagine_tion的博客
10-22 611
1.Set ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构的。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 上面代码通过add()方法向Set结构加入成员，结果表明Set不会添加重复的值。 Set函数可以j接受一个数组（或
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值