注意:
该文章由JS小白(本人)编写完成,仅为个人总结和理解,若有纰漏和误解,还望多多指出,共同成长😋
JS属性节点
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.attributes); // 获取所有的属性节点
console.log(oDiv.getAttribute("id")); // 获取属性节点的值
oDiv.setAttribute("id","box1"); // 修改
oDiv.setAttribute("abc","123"); // 新增
oDiv.removeAttribute("id"); // 删除
默认属性
console.log(oDiv.id);
oDiv.id = "box1";
console.log(oDiv.className);//取类名
自定义的属性
console.log(oDiv.getAttribute("data-id"));
JS节点类型
<div id="box"></div>
var oDiv = document.createElement("div");
var oAttr = document.getElementById("box").attributes[0];
var oTxt = document.createTextNode("aa");
console.log(oDiv.nodeType,oAttr.nodeType,oTxt.nodeType); // 1 2 3
/*
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2
*/
console.log(oDiv.nodeName,oAttr.nodeName,oTxt.nodeName); // div id #text
/*
nodeName 属性指定节点的节点名称。
如果节点是元素节点,则 nodeName 属性返回标签名。
如果节点是属性节点,则 nodeName 属性返回属性的名称。
对于其他节点类型,nodeName 属性返回不同节点类型的不同名称。
*/
console.log(oDiv.nodeValue,oAttr.nodeValue,oTxt.nodeValue); // null box aa
/*
nodeValue 属性设置或返回指定节点的节点值。
如果希望返回元素的文本,请记住文本始终位于文本节点中,并且必须返回文本节点的值
element.childNodes[0].nodeValue
nodeValue 属性的替代选择是 textContent 属性。
*/
JS children&childNodes
children
属性与childNodes
属性的差别:
childNodes
属性返回所有的节点,包括文本节点、注释节点;
children
属性只返回元素节点
兼容性问题
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.firstElementChild);
console.log(oDiv.firstChild);
// 在IE低版本下与谷歌中会有不同的情况
console.log(oDiv.firstChild || oDiv.firstElementChild);
以上是关于JS第十六小节的总结,下次再见😘