dom 获取页面的宽高 DOM获取元素节点的4中方法上课随笔

<!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">
<input type="text" class=input_c name="input_name">
<input type="text" class=input_c name="input_name">
<input type="text" class=input_c name="input_name">
<input type="text" class=input_c name="input_name">
<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>
dom 获取页面的宽 高 DOM获取元素节点的4中方法 上课随笔

相关推荐

dom 获取页面的宽高 DOM获取元素节点的4中方法上课随笔
