• 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

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

     

     
  • 相关阅读:
    nodeclub 学习记录
    读mongoose api 记录
    sublime 插件 和free 注册码
    mongodb 基本语法
    安装 adobe flash player
    nginx 安装
    压缩 解压文件
    async 异步流程控制规则
    a标签# 和javascript:;的区别
    获取url 参数
  • 原文地址:https://www.cnblogs.com/xixiaijunjun/p/10503070.html
Copyright © 2020-2023  润新知