js 页面元素的几个用法总结


Posted in Javascript onNovember 18, 2013

对象属性

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.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”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" onclick="javascript:Foo();" /></div>
<script type="text/javascript" language="javascript">
function Foo()
{
    document.selection.empty();
}
</script>

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

Javascript 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jQuery设计思想
Mar 07 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 #Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 #Javascript
简单的代码实现jquery定时器
Nov 17 #Javascript
禁止空格提交表单的js代码
Nov 17 #Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 #Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 #Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 #Javascript
You might like
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python实现代理服务功能实例
2013/11/15 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
基于python的Paxos算法实现
2019/07/03 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
《三个小伙伴》教学反思
2014/04/11 职场文书
数控机床专业自荐信
2014/05/19 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
小石潭记导游词
2015/02/03 职场文书
开除通知书范本
2015/04/25 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS