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 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
浅谈js闭包理解
Apr 01 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jQuery select控制插件
2009/08/17 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
pytest中文文档之编写断言
2019/09/12 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Python request post上传文件常见要点
2020/11/20 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
办公室主任主任岗位责任制
2014/02/11 职场文书
股份合作协议书范本
2014/04/14 职场文书
世博会口号
2014/06/20 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python