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

若想详细了解，请跳转到此连接。