DOM-节点概念-属性
1、节点的概念
页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。
2、节点相关的属性
2.1、节点分类
**标签节点:**比如 div 标签,p 标签等。
**属性节点:**比如 class,value 等。
**文本节点:**比如闭合标签中的文本内容。
2.2、节点属性
nodeType:节点的类型,它的值有 1,2,3 三种。
标签节点:值为 1
属性节点:值为 2
文本节点:值为 3
nodeName:节点的名字
标签节点:大写的标签名字
属性节点:小写的属性名字
文本节点:#text
nodeValue:节点的值
标签节点:null
属性节点:属性的值
文本节点:文本内容
注:用节点属性来确定并获取标签元素。例如如下代码。
获取节点然后判断是否是p标签节点。
if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) {
nodes[i].style.backgroundColor = "blue";
}
3、元素的属性
3.1属性的方法
1,//而是要 获取标签里里面的自定义属性。
var score = this.getAttribute("score");
//不能通过 this.score 来获取。因为dom对象中没有这个 score 属性。
2,移除元素自带的还有自定义的属性
my$("dv").removeAttribute("score");
my$("dv").removeAttribute("class");
3,设置自定义属性
ist[0].setAttribute("score","10");
list[1].setAttribute("score","50"); //score= 50;
list[2].setAttribute("score","100");
var score = this.getAttribute("score");
alert(score);
boxObj.attributes; // 返回元素所有属性集合对象
boxObj.attributes.length;//返回属性节点个数、
boxObj.attributes[0]; //返回第一个属性节点 (id="first")
boxObj.attributes['id']; //返回属性为 id 的节点
**注意:**getAttribute的获取属性只能是行内样式才可以。
如 style 在行内样式可以使用 boxObj.style.color
获取到,如果是外部样式是获取不到的,但是设置可以。
外部样式获取使用 :window.getComputedStyle(boxObj)["color"]
但是 IE8 不支持。
封装获取任意元素的任意一个属性值
function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]; }
4、获取节点和元素的12行代码
父元素 父节点 子元素 子节点 兄弟元素 兄弟节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>比较全的获取相关节点</title> </head> <body> <div id="dv"> <p id="pid">p标签</p> <span>span标签</span> <ul id="uu"> <li>li标签 <span>ni</span> </li>内 <li>li标签</li>存 <li id="three">li标签</li>知己 <li>li标签</li>天涯 <li>li标签</li>若比邻 </ul> </div> <script src="common.js"></script> <script> var ulObj = my$("uu"); // 父节点 console.log(ulObj.parentNode); // 父元素 console.log(ulObj.parentElement); // 子节点 console.log(ulObj.childNodes);//11 // 子元素 console.log(ulObj.children);//5 // ------------------------------------------------ // 第一个子节点 console.log(ulObj.firstChild);//#text // 第一个子元素 console.log(ulObj.firstElementChild); // 最后一个子节点 console.log(ulObj.lastChild); // 最后一个子元素 console.log(ulObj.lastElementChild); // 某个元素的前一个兄弟节点 console.log(my$("three").previousSibling); // 某个元素的前一个兄弟元素 console.log(my$("three").previousElementSibling); // 某个元素的后一个兄弟节点 console.log(my$("three").nextSibling); // 某个元素的后一个兄弟元素 console.log(my$("three").nextElementSibling); // 1、以上前四个,chrome, firefox, IE8 都支持 // 2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素,所有获取元素的操作都是 undefined。 </script> </body> </html>
5,创建元素的三种方法
方式一
document.write("标签代码及内容");
缺陷:如果是在页面加载完毕后,通过这种方式创建元素的话,页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。
方式二
标签.innerHTML = "标签代码及内容";
方式三
第一步:创建元素,返回值为一个对象元素
document.creatElement("标签的名字");
第二步:将元素追加到父元素中
父元素.appendChild(创建的对象);
2、DOM元素增删改查
appendChild(ele)
:追加元素ele
insertBefore(newEle, oldEle)
: 在oldEle元素前添加newEle
removeChild(ele)
:删除元素ele(或者子元素自杀 ele.remove();
)
replaceChild(newEle, oldEle)
:将oldEle修改为newEle元素
注意:内容摘录自:https://github.com/Daotin/Web/tree/master/04-DOM
若想详细了解,请跳转到此连接。