2018-07-23元素节点

2018-07-23 本文已影响0人 e0013abd041e

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元素节点

猜你喜欢

热点阅读