一、父节点parentNode(亲爹)

  • parentElement

    二、子节点childNodes和children之间的区别

  • childNodes —>获取子节点 不会区分文本,和元素节点 获取所有类型节点

  • children —>只会获取元素节点

    三、兄弟节点

  • nextSibling —>获取下一个兄弟节点

  • nextElementSibling —>获取下个兄弟元素节点
  1. <div id="parent">
  2.         hello world
  3.         <p id="first">good</p>
  4.         <p>good</p>
  5.         <p>good</p>
  6.     </div>
  7.     <script>
  8.         var parent= document.getElementById("parent")
  9.         var childs = parent.children;
  10.         var first = document.getElementById("first");
  11.         console.log(childs)
  12.         console.log(first.nextElementSibling)
  13.     </script>

四、

  • offsetParent //获取给了定位元素的父级
  • offsetLeft //返回元素的相对定位父元素水平偏移位置。 返回number
  • offsetTop //返回元素的相对定位父元素水平垂直偏移位置。
  • offsetWidth //返回元素的宽度 — 包含width,padding,border
  • offsetHeight //返回元素的高度
<style>
        #parent{
            position: relative;
            width:200px;
            height: 200px;
            background: yellow;
        }
        #test{
            position: absolute;
            width:100px;
            height: 100px;
            background: red;
            left:100px;
            top:10px;
            padding:20px;
            border:10px solid #333;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div>
            <div id="test">hello world</div>
        </div>
    </div>
    <script>
    var test = document.getElementById("test");
    console.log(test.offsetParent)
    console.log(test.offsetLeft)
    console.log(test.offsetTop)
    console.log(test.offsetWidth)
    console.log(test.offsetHeight)
    </script>

五、操作元素的属性

  • 获取,设置,删除
  • getAttribute(AttrName);
  • setAttribute(AttrName,AttrValue);
  • removeAttribute(AttrName);
<p id="p" class="one">hello world</p>
    <script>

        /* 操作属性
        setAttribute
        getAttribute
        removeAttribute
         */
        var p = document.getElementById("p");
        p.onclick =  function(){
            this.setAttribute("style","display:none")
        }
        console.log(p.getAttribute("class"))
        console.log(p.removeAttribute("class"))
    </script>

jquery中操作属性

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p id="p" class="one">hello world</p>
    <script>
        /* attr
        attr(attrName,value)  -->设置属性  setAttribute
        attr(attrName) -->获取属性         getAttribute
        removeAttr(attrName)  ->移除属性   removeAttribute
         */
        $("p").click(function(){
            $(this).attr("id","good")
            console.log($(this).attr("id"))
            $(this).removeAttr("class")
        })
    </script>

六、浏览器窗口可视区域的大小

1、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

•  window.innerHeight - 浏览器窗口的内部高度
•  window.innerWidth - 浏览器窗口的内部宽度

2、对于 Internet Explorer 8、7、6、5：

•  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
•  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

<script>
        // 可视区域的高度和width
        console.log(document.documentElement.clientWidth)
        console.log(document.documentElement.clientHeight)
        console.log(screen.availWidth)
    </script>

3、获取网页内容的宽高

  • document.documentElement.scrollHeight
  • document.documentElement.scrollWidth
<style>
        body{
            width:200px;
            height: 1800px;
            background: red;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        /* scrollHeight,scrollWidth  获取滚动区域的宽高 */
        console.log(document.documentElement.scrollHeight)
        console.log(document.documentElement.scrollWidth)
    </script>

七、文档碎片

  • 文档碎片可以提高DOM操作性能
  • document.createDocumentFragment()
  • 原理:将dom暂存在fragment上，之后一次性添加到dom
<ul id="parent">

    </ul>
    <script>
        /* 文档碎片  脱离于DOM
        原理: 将DOM暂时寄存到fragment上,之后一次性添加到DOM上就可以了
         */
        var parent = document.getElementById("parent")
        var frag = document.createDocumentFragment();
        for(var i=0;i<=10;i++){
            /* 寄存到文档碎片上 */
            var li = document.createElement("li");
            li.innerHTML = i;
            frag.appendChild(li)
        }
        parent.appendChild(frag)
    </script>

八、is(:”visible”) 判断一个元素是否可见

  • is(“:visible”) 判断一个元素是否可见

     fadeIn  <br />       fadeOut  <br />       fadeToggle()<br />       fadeTo(speed,opacity,callback)

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <style>
      div{
          height: 100px;
          width:100px;
          background: red;
      }
  </style>
</head>
<body>
  <!-- 

  -->
  <div>

  </div>
  <button>btn</button>
  <script>
      $("button").click(function(){
          // if($("div").is(":visible")){
          //     $("div").fadeOut(1000)
          // }else{
          //     $("div").fadeIn(1000)
          // }
          // $("div").fadeToggle()
          $("div").fadeTo(1000,.2)

      })
      $("div").mouseover(function(){
          $(this).fadeTo(1000,.2)
      }).mouseout(function(){
          $(this).fadeTo(1000,.8)
      })
  </script>
  <script>
  </script>