JS document对象简单用法完整示例
本文实例讲述了JSdocument对象简单用法。分享给大家供大家参考,具体如下:
js-document对象学习 //直接获取对象 functiontestGetElementById(){//通过id获取对象 //vargby=window.document.getElementById();//window可以省去不写 vargby=document.getElementById("sid"); alert(gby);//输出的返回值是标签的类型[objectHTMLInputElement] } functiontestGetElementsByName(){//通过name获取对象 vargbn=document.getElementsByName("umane"); alert(gbn);//输出的返回值类型是[objectNodeList]一个对象类型的数组 alert(gbn.length);//Nodelist的元素是节点元素,长度是节点的个数。每一个容器或标签算是一个节点。 } functiontestGetElementsByTagName(){//通过TagName(标签)获取对象 vargbt=document.getElementsByTagName("input"); alert(gbt);//输出返回值类型是[objectHTMLCollection]是一个对象元素的集合 alert(gbt.length);//其集合的数目是所有input个数 } functiontestGetElementsByClassName(){//通过class获取对象 vargbc=document.getElementsByClassName("clname"); alert(gbc);//输出返回值类型是[objectHTMLCollection]是一个对象元素的集合 alert(gbc.length);//集合元素的长度是含有传入类属性的元素个数。 } //间接获取对象 functiontestParent(){//利用父节点调用其节点对象 varshowdiv=document.getElementById("showdiv"); vartchild=showdiv.childNodes; alert(tchild);//输出返回值类型是[objectNodeList]的一个list数组 alert(tchild.length);//返回子节点的长度13,是由于在div中和text有换行符算一个子节点 } functiontestChild(){//利用子节点调用其父节点 varshowdiv=document.getElementById("child"); vartparent=showdiv.parentNode; alert(tparent);//输出返回值类型是[objectHTMLDivElement](其父节点的类型) } functiontestBorther(){//利用子节点调用其父节点 varshowdiv=document.getElementById("target"); vartopBorther=showdiv.previousSibling;//输出参考对象上面的元素 varlowBorther=showdiv.nextSibling//输出参考元素的下面的元素 alert(topBorther+":::"+lowBorther);//输出返回值类型是[objectHTMLDivElement](其父节点的类型) } .clname{} #showdiv{ border:solid2pxcyan; width:300px; height:400px; } input[type=text]{ margin-left:3px; } js-document对象学习
直接调用
间接调用
运行结果:
Document:
获取HTML元素:
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程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。