美文网首页
2018-07-23元素节点

2018-07-23元素节点

作者: e0013abd041e | 来源:发表于2018-07-23 20:11 被阅读0次

    1.概述
    Element节点对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象
    2.元素节点的属性

    • Element.id//返回当前元素的id名
    <div id="box">我是一个div标签</div>
    var div=document.getElementByID('box')
    console.log(div.id)//box
    div.id="box1"//这是给这个div改变id名称
    
    • Element.tagName//返回当前元素的标签名,以大写的方式返回
    <div id="box">我是一个div标签</div>
    console.log(div.tagName)//DIV
    

    Element.className//返回当前元素的class名,它的值是一个字符串,每个class之间用空格分割.可读可写

    <div class="a b c d">我是一个div标签</div>
    var div=document.getElementsTagName('div')[0]
    console.log(div.className)//a b c d
    

    Element.classList//返回当前元素的所有class名,它的值是一个伪数组

    <div class="a b c d">我是一个div标签</div>
    var div=document.getElementsTagName('div')[0]
    console.log(div.classList)//DOMTokenList(4) ["a", "b", "c", "d", value: "a b c d"]
    

    Element.classList classList有下列方法
    add() :增加一个class
    remove() :移出一个class
    contains() :返回布尔值,测试当前类名是否存在当前元素中,如果存在返回一个true,如果不存在返回一个flase
    toggle() :在括号里填入一个class名,如果这个类名之前就存在,就把他删掉,如果没有就把他添加进去
    item() :返回指定索引位置的class(从0开始)
    toString() :将class的列表转为字符串.


    Element.clientWidth Element.clientHeight//返回元素本身的宽高,算入padding,不算入margin和border,只对块元素生效

    <div id="div" style="width:500px; height:300px; padding:20px; border:1px solid red;">
    </div>
    var div=document.getElementById('div')
    console.log(div.clientWidth,div.clientHeight)//540 340
    

    Element.offsetWidth Element.offsetHeight//返回元素本身的宽高,算入padding和border.

    <div id="div" style="width:500px; height:300px; padding:20px; border:1px solid red;">
    var div=document.getElementById('div')
    console.log(div.clientWidth,div.clientHeight)//542 342
    </div>
    

    Element.scrollLeft Element.scrollTop//返回元素水平,垂直的滚动像素数,可读可写,控制整个页面的scrollTop,Left值许作用在html上而不是body

    document.documentElement.scrollTop//这是通过html获取的整个页面的垂直滚动的像素
    document.documentElement.scrollLeft//这是通过html获取的整个页面的水平滚动的像素
    

    Element.offsetParent //返回当前最靠近元素的并且css的position属性不等于statuc的上层元素,但是乳钙元素display:none或者position:fixed,offsetParent返回null(靠近他的父级元素必须带有绝对定位或者相对定位,否则不会算入离他进的元素,下面请看案例)

    <style>
    #div{
          position:absolute;
    }
    </style>
    <div id="div">
      <p>
            <span id="span"></span>
    </p>
    </div>
    var span="document.getElementById('span')
    console.log(span.offsetParent)//<div id="div"></div>,在此可以看出,p标签没有绝对定位或者
    没有相对为被直接略过,如果都没有定位会返回body
    

    Element.offsetLeft Element.offsetTop//返回该元素距离offsetParent的水平距离和垂直距离

    <style>
    #div{
          position:absolute;
    }
    #h2{
          margin:20px 30px;
    }
    </style>
    <div id="div">
      <p>
            <h2 id="h2"></h2>
    </p>
    </div>
    var h=document.getElementById('h2')
    console.log(h.offsetTop)//20
    console.log(h.offsetLeft)//30
    

    Element.firstElementChild Element.lastElementChild//返回当前元素的第一个或最后一个元素子节点,没有就返回null

    <div id="div">
    <p></p>
    <span></span>
    </div>
    var div=document.getElementById('div')
    console.log(div.firstElementChild)//<p></p>
    console.log(div.lastElementChild)//<span></span>
    

    Element.previousElementSibling Element.nextElementSibling//返回当前元素元素节点的前一个和后一个同级元素节点,如果没有就返回null

    <p></p>
    <div id="div">
    </div>
    <span></span>
    var div=document.getElementById('div')
    console.log(div.previousElementSibling)//<p></p>
    console.log(div.nextElementSibling)//<span></span>
    

    3,元素节点的方法
    Element.remove()//用于移出节点

    <div id="div"></div>
    var div=document.getElementById('div')
    console.log(div.remove())//div会被移除
    

    好累好累,两节课才写完,一天的收获啊,给大家分享一下哈.

    相关文章

      网友评论

          本文标题:2018-07-23元素节点

          本文链接:https://www.haomeiwen.com/subject/uzjjmftx.html