JS document对象简单用法完整示例_javascript技巧

来源:脚本之家  责任编辑:小易  

简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。区别:1、window 指窗体。document指页面。document是window的一个子对象。2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象www.zgxue.com防采集请勿采集本网。

本文实例讲述了JS document对象简单用法。分享给大家供大家参考,具体如下:

document的方法如下:(摘自javascript宝典-16章document对象和body元素对象) attachEvent();captureEvent();clear();clearAttributes();close();createAttribute();createComment();

<html> <head> <title>js-document对象学习</title> <meta charset="UTF-8"/> <script type="text/javascript">// 直接获取对象 function testGetElementById(){ //通过id获取对象// var gby=window.document.getElementById(); //window可以省去不写 var gby=document.getElementById("sid"); alert(gby); //输出的返回值是标签的类型[object HTMLInputElement] } function testGetElementsByName(){ //通过name获取对象 var gbn=document.getElementsByName("umane"); alert(gbn); //输出的返回值类型是[object NodeList]一个对象类型的数组 alert(gbn.length); //Nodelist的元素是节点元素,长度是节点的个数。每一个容器或标签算是一个节点。 } function testGetElementsByTagName(){ //通过TagName(标签)获取对象 var gbt=document.getElementsByTagName("input"); alert(gbt); //输出返回值类型是[object HTMLCollection]是一个对象元素的集合 alert(gbt.length); //其集合的数目是所有input个数 } function testGetElementsByClassName(){ //通过class获取对象 var gbc=document.getElementsByClassName("clname"); alert(gbc); //输出返回值类型是[object HTMLCollection]是一个对象元素的集合 alert(gbc.length); //集合元素的长度是含有传入类属性的元素个数。 }// 间接获取对象 function testParent(){ //利用父节点调用其节点对象 var showdiv=document.getElementById("showdiv"); var tchild=showdiv.childNodes; alert(tchild); //输出返回值类型是[object NodeList]的一个list数组 alert(tchild.length); //返回子节点的长度 13,是由于在div中和text有换行符算一个子节点 } function testChild(){ //利用子节点调用其父节点 var showdiv=document.getElementById("child"); var tparent=showdiv.parentNode; alert(tparent); //输出返回值类型是[object HTMLDivElement](其父节点的类型) } function testBorther(){ //利用子节点调用其父节点 var showdiv=document.getElementById("target"); var topBorther=showdiv.previousSibling; //输出参考对象上面的元素 var lowBorther=showdiv.nextSibling //输出参考元素的下面的元素 alert(topBorther+":::"+lowBorther); //输出返回值类型是[object HTMLDivElement](其父节点的类型) } </script> <style type="text/css"> .clname{} #showdiv{ border: solid 2px cyan; width: 300px; height: 400px; } input[type=text]{ margin-left: 3px; } </style> </head> <body> <h3>js-document对象学习</h3> <h4>直接调用</h2> <input type="button" name="" id="sid" value="测试GetElementById" onclick="testGetElementById()" /> <input type="button" name="umane" id="" value="测试GetElementByName" onclick="testGetElementsByName()" /> <input type="button" name="" id="" value="测试GetElementsByTagNames" class="clname" onclick="testGetElementsByTagName()" /> <input type="button" name="" id="" value="测试GetElementsByClassName" class="clname" onclick="testGetElementsByClassName()" /> <hr /><br /> <h4>间接调用</h2> <input type="button" name="" id="" value="测试Parent" onclick="testParent()" /> <input type="button" name="" id="" value="测试 Child" onclick="testChild()" /> <input type="button" name="" id="" value="测试Borther" onclick="testBorther()" /> <div id="showdiv"> <input type="text" name="" id="parent" value="" /> <input type="text" name="" id="child" value="" /> <input type="text" name="" id="target" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> </body></html>

简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个

运行结果:

在 IE 下 用 document.all[0]获取当前document对象!然后就是body对象 要看你的body标签在你文档的索引位置,然后调用它 例如索引位置是4,从0开始。document.all[4] 切记!更简单的方法 document

Document:

https://developer.mozilla.org/zh-CN/docs/Web/API/Document 看文档

获取HTML元素:

if(document.你的对象){ 存在 }else{ 不存在 }

1:直接获取方式:通过id   通过name属性值    通过标签名   通过class属性值

2:间接获取方式:父子关系   子父关系   兄弟关系

3:操作HTML元素对象的属性

      操作HTML元素对象的内容和样式

      操作HTML的文档结构

      document操作Form元素

      document操作表格

      document对象实现form表单校验

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。区别:1、window 指窗体。document指页面。document是window的一个子对象。2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript的document对象和window对象详解
  • javascript中document对象使用详解
  • javascript window及document对象详细整理
  • js基础之dom中document对象的常用属性方法详解
  • javascript——dom操作——window.document对象详解
  • 浅析js中document对象的一些重要属性
  • javascript基础语法、dom操作树及document对象
  • javascript中的document文档对象
  • js禁止document element对象选中文本实现代码
  • javascript入门教程(9) document文档对象
  • javascript每日必学之继承
  • 微信小程序登录数据解密及状态维持实例详解
  • javascript装饰器函数(decorator)实例详解
  • ff火狐下获取一个元素同类型的相邻元素实现代码
  • js实时获取窗口大小变化的实例代码
  • javascript原生实现观察者模式的示例
  • javascript常用代码段搜集
  • javascript 检测浏览器类型和版本的代码
  • js实现网页滚动条感应鼠标变色的方法
  • js实现常见的tab、弹出层效果(tab标签,斑马线,遮罩层等)
  • JS中document对象和window对象有什么区别么?
  • JS中document对象和window对象的区别
  • js document对象是怎么来的
  • HTML中如何用JS获得其他网页的DOCUMENT对象
  • JavaScript中的Document对象的方法都有哪些
  • JS中document对象和window对象的区别
  • JS求教: 获取body对象,这样写document.body对IE 6、7、8下的兼容性如何?
  • javascript中document对象方法有哪些
  • 如何用js判断document里的一个对象是否存在
  • js中向对象中添加属性的两种方法?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript操作dom技巧总结javascript页面元素操作技巧总结javascript事件相关操作与技巧大全javascript查找算法技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript错误与调试技巧总结javascript的document对象和window对象详解javascript中document对象使用详解javascript window及document对象详细整理js基础之dom中document对象的常用属性方法详解javascript——dom操作——window.document对象详解浅析js中document对象的一些重要属性javascript基础语法、dom操作树及document对象javascript中的document文档对象js禁止document element对象选中文本实现代码javascript入门教程(9) document文档对象javascript每日必学之继承微信小程序登录数据解密及状态维持实例详解javascript装饰器函数(decorator)实例详解ff火狐下获取一个元素同类型的相邻元素实现代码js实时获取窗口大小变化的实例代码javascript原生实现观察者模式的示例javascript常用代码段搜集javascript 检测浏览器类型和版本的代码js实现网页滚动条感应鼠标变色的方法js实现常见的tab、弹出层效果(tab标签,斑马线,遮罩层等)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法d3.js进阶系列之csv表格文件的读取详解reactjs实现表单的单选多选和反选的示例js操作xml实例总结(加载与解析xml文件、字js数组的赋值介绍html代码调试脚本js导入导出excel(实例代码)js获取当前页面名称的简单实例javascript !!的作用微信小程序自定义菜单切换栏tabbar组件代js中eval解析json字符串的一个小问题
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved