如<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对象指的是html元素,例如div,p,img等。他们的属性如id,classname,classlist与html元素的属性是一致的。
Element.id 属性返回指定元素的id属性,该属性可读写(通过js修改元素的id属性的值)。
- //<p id="foo">
- var p = document.queryselector('p');//获取<p>标签节点对象
- p.id // "foo"
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>
他是一个对象,当一个元素存在多个class属性值时,而且需要对class的多个属性值进行增删改查等操作,可以使用classlist对象,它将class所有的属性值打包成一个伪数组对象,进而操作属性值。classList对象有下列方法:
add():增加一个class。
remove():移除一个class。
contains() :检查当前元素是否包含某个class。
toggle():将某个class移入或移出当前元素。
- var div = document.getE1ementById('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
作用:获取或者修改一个元素节点里面嵌套的所有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>
innerText和innerHTML类似,不同的是innerText无法识别元素,会直接渲染成字符串。
就是说,innerHTML的参数字符串里含有html语法的话,会被浏览器直接解析。
而innerText直接把参数当做是字符串。
这里的位置属性指的是:相对于父级元素或者浏览器的位置属性。比如body.clientHeight表示显示的网页总高度,document.documentElement.clientHeight表示的视口(viewpoint)的高度。
可以简记为:client,scroll,offset。
client表示:元素自身的内容及被内容撑开的大小,只返回在网页上显示范围内的大小。
scroll表示:具有隐藏内容的元素的总高度。相比于client把隐藏部分加上去了。
offset表示:css盒模型整个元素的大小。
width和height指的是自身大小,left和top指的是相对于上一层元素的位置。
显示的是相对于视口上下滚动的多少像素。
需要父级元素存在定位的css样式才会是相对于父级元素,若父级元素没有定位则一直向上找。
当一个元素使用这个方法之后,会自动获取焦点,相当于被鼠标点击。
Element.blur方法用于将焦点从当前元素移除。
Element.remove方法用于将当前元素节点从它的父节点移除。移除之后不会再在网页上显示。
例如:<table border="1" width="200" height="200" cellspacing="0" align="center">,这个元素里面有很多的属性,下面将介绍使用js来修改这些属性。
Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在,则返回null。
- //HTML代码为
- <div id="div1" align="left">
- var div = document.getElementById('div1');
- div.getAttribute('align') // "left"
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在,则相当于编辑已存在的属性。若之前不存在某个属性则会添加上去。
- var d = document.getElementById('d1');
- d.setAttribute('align','center');
- //下面是对img元素的src属性赋值的例子
- var myImage = document.queryselector('img');
- myImage.setAttribute('src','images/1.png');
Element.hasAttribute方法返回一个布尔值,表示当前元素节点是否包含指定属性。
- var d = document.getElementById('box');
- if (d.hasAttribute('align'))
- {
- d.setAttribute('align','center' );
- }
Element.removeAttribute方法用于从当前元素节点移除属性。
- // HTML代码为<div id="box" align="left" width="200px">
- document.getElementById('box').removeAttribute('align');
- //现在的HTML代码为<div id="box" width="200px">
有时,需要在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*属性