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 相关文章推荐
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 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
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
为数据添加append,remove功能
2006/10/03 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python logging日志模块的详解
2017/10/29 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
结婚周年感言
2014/02/24 职场文书
健康家庭事迹材料
2014/05/02 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
采购内勤岗位职责
2015/04/13 职场文书
首次购房证明
2015/06/19 职场文书
运动会通讯稿300字
2015/07/20 职场文书
大学生党课感想
2015/08/11 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python