如<table border="1" width="200" height="200" cellspacing="0" align="center">，他会在网页上显示出一个表格，他还有一些属性。
在DOM中，这个table元素就是一个节点对象Element object。
下面将要了解：1，使用JavaScript查询，增添，删除，修改元素的属性；2，使用JavaScript获取一个元素在网页中的布局情况；3，使用JavaScript给元素增加事件方法。
Element对象对应网页的HTML元素。每一个HTML元素，在DOM树上都会转化成一个Element节点对象(以下简称元素节点)，即Element Node。Element对象的属性与html标签的属性大同小异，例如class，id，name这些属性是Element对象和html元素共有的的。
目录
5，Element.getBoundingClientRect()
一，Element对象属性一览
Element对象指的是html元素，例如div，p，img等。他们的属性如id，classname，classlist与html元素的属性是一致的。
二，Element对象属性详解
1，Element.id属性
Element.id 属性返回指定元素的id属性，该属性可读写(通过js修改元素的id属性的值)。
//<p id="foo">
var p = document.queryselector('p');//获取<p>标签节点对象
p.id // "foo"2，Element.className属性
className属性用来读写当前元素节点的class属性。它的值是一个字符串(即把所有class的属性值加上引号返回)，每个class属性值之间用空格分割。
<body>
<p class="p1 p2 p3" id="p"></p>
<script>
var p_obj = document.getElementById('p');
console.log(p_obj.className);<!--打印出:p1 p2 p3-->
</script>
</body>
3，Element.classList对象
他是一个对象，当一个元素存在多个class属性值时，而且需要对class的多个属性值进行增删改查等操作，可以使用classlist对象，它将class所有的属性值打包成一个伪数组对象，进而操作属性值。classList对象有下列方法：
add():增加一个class。
remove():移除一个class。
contains() :检查当前元素是否包含某个class。
toggle():将某个class移入或移出当前元素。
var div = document.getElementById('myDiv');//获取元素节点对象
div.classList.add('mycssclass');//给div元素节点添加一个class属性值，值为myclass
div.c1assList.add('foo','bar');//给class属性再添加两个值value
div.classList.remove('mycssclass');
div.classList.toggle('mycssclass'); //如果mycssclass不存在就加入，否则移除
div.classList.contains('mycssclass');//存在返回true否则false
4，Element.innerHTML()方法
作用：获取或者修改一个元素节点里面嵌套的所有html代码内容。
不加括号时，Element.innerHTML是一个属性，返回一个字符串，等同于该元素包含的所有HTML代码。
该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
例如：若：<p>→Element，则：Element.innerHTML('<a herf='#'>666</a>')的内容会出现在网页上，也就是：<p><a herf='#'>666</a></p>，这句代码会被浏览器渲染从而666字符串被加上超链接。
<div id="root" class="c1 container">容器</div>
<script>
var root = document.getElementById("root");
console.log(root.innerHTML);
root.innerHTML ="<a herf='#'>666</a>";
</script>
5，Element.innerText()方法
innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串。
就是说，innerHTML的参数字符串里含有html语法的话，会被浏览器直接解析。
而innerText直接把参数当做是字符串。
二，Element对象位置属性大全
这里的位置属性指的是：相对于父级元素或者浏览器的位置属性。比如body.clientHeight表示显示的网页总高度，document.documentElement.clientHeight表示的视口(viewpoint)的高度。
可以简记为：client，scroll，offset。
client表示：元素自身的内容及被内容撑开的大小，只返回在网页上显示范围内的大小。
scroll表示：具有隐藏内容的元素的总高度。相比于client把隐藏部分加上去了。
offset表示：css盒模型整个元素的大小。
width和height指的是自身大小，left和top指的是相对于上一层元素的位置。
1，总览
2，client
3，scroll
显示的是相对于视口上下滚动的多少像素。
4，offset
需要父级元素存在定位的css样式才会是相对于父级元素，若父级元素没有定位则一直向上找。
三，Element对象的方法大全
1，总览
2，Element.focus()方法
当一个元素使用这个方法之后，会自动获取焦点，相当于被鼠标点击。
3，Element.blur()
Element.blur方法用于将焦点从当前元素移除。
4，Element.remove()
Element.remove方法用于将当前元素节点从它的父节点移除。移除之后不会再在网页上显示。
5，Element.getBoundingClientRect()
四，Element对象属性的操作
1，总览
例如：<table border="1" width="200" height="200" cellspacing="0" align="center">，这个元素里面有很多的属性，下面将介绍使用js来修改这些属性。
2，Element.getAttribute()
Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
//HTML代码为
<div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
3，Element.setAttribute()
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。若之前不存在某个属性则会添加上去。
var d = document.getElementById('d1');
d.setAttribute('align','center');
//下面是对img元素的src属性赋值的例子
var myImage = document.queryselector('img');
myImage.setAttribute('src','images/1.png'); 4，Element.hasAttribute()
Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。
var d = document.getElementById('box');
if (d.hasAttribute('align'))
{
d.setAttribute('align','center' );
}5，Element.removeAttribute()
Element.removeAttribute方法用于从当前元素节点移除属性。
// HTML代码为<div id="box" align="left" width="200px">
document.getElementById('box').removeAttribute('align');
//现在的HTML代码为<div id="box" width="200px">6，dataset属性
有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义属性使用标准提供的data-*属性。
dataset属性指向的是一个DOMStringMap对象，这个对象采用键值对的形式存在自定义属性，对所有程序员对某个元素自定义的属性进行管理。
<div id="box" data-kawayi="kawayi" data-cxk="cxk">然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作HTML元素标签的data-*属性。
var dataSetObj = document.getElementById('box').dataset;//用dataSetObj来绑定id为box的元素的所有自定义属性
dataSetObj.kawayi;//获得之前设置的data*属性
dataSetObj.cxk；
dataSetObj.kawayi ='niubility';//修改之前的data*属性
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
