<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" src="08.14.js"></script> </head> <body> <!-- 快捷键Ctrl+Shift+/ 跳转路径;locatio 跳转百度路径 location.href ='http://www.baidu.com'; window.open ('http://www.baidu.com'); 获取页面的宽度和高度 注意 var w = screen.availHeight;/*宽度*/ console.log(w); var d = screen.avaiWidth;/*高度*/ console.log(h); Dom操作: 把html标签的内容分为各种节点; 文档节点-----标签(document)------body 元素节点-----内容 属性节点 注释节点 获取元素节点(标签) 通过id获取:(最常用) document.getElementById(id属性值) 通过标签来获取: document.getElementsByTagName(标签名称);//可获取多个标签 通过name获取值; document.getElementsByTagName(name属性值); 通过class获取值 ; document.getElementsByClassName(class属性值);(不推荐) 注;收集的元素都是以字符串的形式返回 获取文本节点(Nodes; 节点) 获取值 var dd = documen.gerElementsByTagName('div')[0].innerHTml; 获取兄弟节点; firstChild, lastChild: 父节点获得第一个/最后一个子节点 nextSibling;获得下个兄弟节点 在获取前一个兄弟节点的时候可以试用 nextSibling 会匹配字符,包括换行和空格,而不是节点。 nextElementSibling 会直接匹配节点 previousSibling;获得上一个兄弟节点 在获取前一个兄弟节点的时候可以使用 previousSibling 会匹配字符 ,包括换行和空格,而不是节点。 previousElementSibling 会直接匹配节点 childNodes;父节点获得内部全部的子节点信息 通过ID获取的值 --> <!-- <input type="text" class=input_c name="input_n"id="uesr"> <input type="text" class=input_c name="input_name"id="wesd"> <input type="text" class=input_c name="input_name"id="asdz"> <input type="text" class=input_c name="input_name"id="xcas"> <input type="text" class=input_c name="input_name"id="zsxc"> <button onClick="tijiao()">提交</button> --> <ul id="names"> <li id="n1">张三</li> <li id="n2">李四</li> <li id="n3">王五</li> <li id="n4">赵六</li> <li id="n5">小红</li> <li id="n6">小明</li> </ul> <input type="button" value="父节点" onClick="showContent(current.parentNode)"> <input type="button" value="第一个子节点" onClick="showContent(current.parentNode.firstChild.nextSibling)"> <input type="button" value="上一个节点" onClick="showContent(current.previousSibling.previousSibling)"> <input type="button" value="下一个节点" onClick="showContent(current.nextSibling.nextSibling)"> <input type="button" value="最后一个子节点" onClick="showContent(current.parentNode.lastChild.previousSibling)"> <input type="button" value="得到所有li的元素个数" onClick="showCount()"> <script type="text/javascript"> </script> </body> </html>