zoukankan      html  css  js  c++  java
  • 节点

    节点 

    • 元素节点 : 标签是元素节点
    • 属性节点 : 例:Id , name , type , value
    • 文本节点 : 例:title、h1、p下的文档

    节点属性

    • nodeType :节点类型,输出数值。例 1,2,3,,,
    • nodeName:(文本#text)
    • nodeValue: 属性值,文本内容,可为null。
    let h = document.getElementById("h");
    console.log("元素节点的nodeType:",h.nodeType);
    let attr = h.attributes;
    console.log("属性节点的nodeType:",attr[1].nodeType);
    console.log("属性节点的nodeName:",attr[1].nodeName);
    let textNode = h.firstChild;
    console.log("文本节点的nodeType:",textNode.nodeType);
    console.log("文本节点的nodeName:",textNode.nodeName);
    console.log("文本节点的nodeValue:",textNode.nodeValue);

    节点导航

    • firstChild
    • lastChild:
    • nextSibling 兄弟级,下一个
    console.log(h.nextSibling.nextSibling.nextSibling.nextSibling.previousSibling.previousSibling);
      // 第一个nextSibling输出结果为空,因两级之间有换行
    • previousSibling 兄弟级,上一个
    • childNodes 所有子级
    • parentNode 父级
    let rootElement = document.documentElement;
    console.log(rootElement.childNodes);
    console.log(h.parentNode);

    获取节点方法

    • getElementsById Id具有唯一性
    • getElementsByTagName 得到所有相同的标签,结果为数组
    • getElementsByName 结果为所有相同的name
    • 参数可写CSS选择器:
    • querySelector 得到相同的第一个
    • querySelectorAll 得到所有,数组

    节点操作

    方法:

    创建

    • createElement 创建元素节点
    • createAttribute 创建属性
    • createTextNode 创建文本节点

    注:calss 是关键字,不能直接用class,应用calssName

    增加

    • appendChild 增加到末尾

        父级.appendChild(子级)

    h3.title = "h3 title";
    h3.className = "fontColor";
    console.log(h3,text);
    h3.appendChild(text);
    • insertBefore 增加在XX之前 insertBefore(要插入的元素,在XXX之前)

      

     d1.insertBefore(h3,d1.firstChild);

    删除

    removeChild

    let delBtn = document.getElementById("delBtn");
    delBtn.onclick = function(){
        d1.removeChild(d1.lastChild);
    
    }

    替换

    replaceChild

    let replaceBtn = document.getElementById("replaceBtn");
    replaceBtn.onclick = function(){
        let p = document.createElement("p");
        let text = document.createTextNode("段落");
        p.appendChild(text);
        d1.replaceChild(p,d1.firstChild); // p,要替换的内容;d1.firstChild 原本的内容
    }
  • 相关阅读:
    用成员函数指针作为Callback
    在ubuntu上编译gcc会到的问题及解决方法
    异步
    棋牌游戏服务器架构: 详细设计(二) 应用层设计
    elementUI eltable添加序号列
    vue 父子组件的相互调用
    所谓编程的哲学艺术
    亲爱的百度,您带着bug翩翩走来……呃
    std::vector<point>对距离固定点的距离排序
    升级ubuntu11出现grub错误
  • 原文地址:https://www.cnblogs.com/llying/p/7781670.html
Copyright © 2011-2022 走看看