Element对象
1. 特征相关的属性
Element.id
,Element.tagName
,Element.innerHTML
,Element.outerHTML
(包含标签定义本身)Element.className
Element.classList:add/remove/contains/toggle/item/toString
var asia = document.getElementById("asia");
console.log(asia.outerHTML);//包括自己本身
console.log(asia.innerHTML);
console.log(asia.tagName);
console.log(asia.className);
console.log(asia.classList);
asia.classList.add('aaa','bbb');
console.log(asia.classList.contains('bbb'));//true
console.log(asia.classList.item(3));
asia.classList.remove('bbbb');
2.盒子模型相关属性
Element.clientHeight/clientWidth
返回元素可见部分的高度和宽度:注意包含了 padding
的值Element.clientLeft/Top
获取元素左边框、顶部边框的宽度
3.相关节点的属性
Element.children
返回当前元素节点的所有子元素。Element.childElementCount
返回当前元素节点所有子元素的个数。
var _asia = document.getElementById("_asia");
console.log(_asia.children);
console.log(_asia.childElementCount);
console.log(_asia.children.length);
Element.firstElementChild/lastElementChild
Element.nextElementSibling/previousElementSibling
4.查找相关属性
Element.querySelector()
该方法接收 CSS
选择器作为参数,返回父元素第一个匹配的子元素。
<ul id="_asia">
<li id="_china" class="t2">China <input type="button" id="btn" value="X" onclick="removeCountry1('_china');"/></li>
<li id="_korea" class="t1">Korea <input type="button" id="btn" value="X" onclick="removeCountry1('_korea');"/></li>
<li id="_japan" class="t1 t2">Japan <input type="button" id="btn" value="X" onclick="removeCountry1('_japan');"/></li>
</ul>
var _ali = document.getElementById("_asia").querySelector(".t1");
console.log(_ali); // _korea
Element.querySelectorAll()
方法接收 CSS 选择器作为参数,返回一个 NodeList 对象,包含所有匹配的子元素。Element.getElementsByTagName()
注意是标签的参数大小写不敏感Element.getElementsByClassName()
方法接收类名,返回当前节点所有匹配类名的元素Element.closest()
方法接收 CSS 选择器作为参数,返回当前元素节点最接近的父元素(从当前节点开始向上遍历)
<div id="_d" class="ddd">
Here is _d
<div id="_d1" class="ddd">
Here is _d1
<div id="_d2">
Here is _d2
<div id="_d3">
Here is _d3
</div>
</div>
</div>
</div>
var _d1 = document.getElementById("_d3").closest(".ddd");
console.log(_d1.textContent); // _d1
5.其他方法
Element.remove()
将当前节点从 DOM 树上删除。
Attribute 对象
HTML 元素中包含标签名和若干个键值对,这个键值对我们称为“属性”(Attribute)
在 DOM 中,我们很少直接对属性进行操作,一般都是元素节点对象(Element对象)来操作属性。
1.Element.attributes属性
返回一个类似数组的动态对象
示例:遍历元素节点的所有属性
var d1Ele = document.getElementById("_d3").nextElementSibling;
if (d1Ele.hasAttributes()) {
var d1Att = d1Ele.attributes;
for (var i = 0; i < d1Att.length; i++) {
console.log(d1Att[i].name + ":" + d1Att[i].value);
}
} else {
console.log("No attributes To show!");
}
2. 元素节点对象的属性
HTML元素节点的标准属性,会自动成为元素节点对象的属性。
var _abaidu = document.getElementById("_abaidu");
console.log(_abaidu.href); // http://www.baidu.com
console.log(_abaidu.target); // _blank
console.log(_abaidu.test); // undefined
虽然在Html中大小写是不敏感的,但是在 Javascript 中,属性大小写敏感,而且属性一般都是采用小写。
有些HTML属性名是 Javascript 的保留字,转为 Javascript 属性时,需要改名字,主要由
class-className,for-htmlFor
3.属性操作的标准方法
getAttribute()
setAttribute()
上述两个方法对所有的属性都适用(包含用户自定义的方法)
_abaidu.setAttribute("href","http://www.sina.com");
console.log(_abaidu.getAttribute("href"));
_abaidu.setAttribute("test","xxx");
console.log(_abaidu.getAttribute("test"));
hasAttribute()
removeAttribute()
4.dataset 属性
有时需要在 Html 上附加数据,供 Javascript 脚本使用。一种解决方法是自定义属性。
虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值,但是会使得HTML元素的属性不符合规范,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*
属性。
再使用元素对象的 dataset 属性对自定义的属性进行操作。
注意:data-后面的属性有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld,我们不这么写,而写成data-hello-world。
在转成dataset的键名的时候,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。
console.log(_abaidu.getAttribute("data-hello-world"));
console.log(_abaidu.dataset.helloWorld); // 驼峰命名
Text 节点
可以通过nodeValue属性或者data属性访问节点中包含的文本,这两个属性中包含的值相同。
对nodeValue 的修改也会通过data反应出来,反之亦然。
<div id="dd">hello</div>
//获得文本节点
var text = document.getElementById('dd').firstChild;
//获得nodeValue
console.log(text.nodeValue);
//设置nodeValue
text.nodeValue = 'world';
CSS操作
1.style属性
操作 CSS 样式最简单的方法,就是使用网页元素节点的 getAttribute
方法、setAttribute
方法和 removeAttribute
方法。直接读写或者删除网页元素的 style 属性。
var _p1 = document.getElementById("_p1");
_p1.setAttribute("style","color:blue;");
1.Style对象
每个网页元素对应一个 DOM 节点对象。这个对象的 style 属性可以直接操作,用来读写行内 CSS 样式。
_p1.style.fontSize = "50px";
2.cssText属性
元素节点的 style 对象有个 cssText 属性,该属性可以读写或删除整个样式。
3.setProperty(),getPropertyValue(),removeProperty()
_p1.style.setProperty("font-size","50px");
需要注意的是:在使用 property 相关方法的时候,属性名使用的是和CSS样式中定义的一样的。而直接使用 style.xxxx
方式的时候,是需要将连词符号进行转化为驼峰命名方式的。