• javascript DOM操作


    1.创建节点
    createElement()方法按照给定的标签名创建一个新的元素节点,它的nodeType属性值为1。
    createTextNode()方法将创建一个包含着给定文本的新文本节点,它的nodeType属性值为3.
    返回值是一个指向新建节点的引用指针。
    var para = document.createElement("p");
    var message = document.createTextNode("hello world");
    para.appendChild(message);
    document.body.appendChild(para);

    2.复制节点
    cloneNode()方法将为给定的节点创建一个副本。这个方法的返回值是一个指向新克隆节点的引用指针。
    这个方法只有一个布尔类型的参数,它的可取值只能是true或false。参数是true时新节点将包含着与被复制节点完全一样的子节点。如果这个参数值 是false,新节点将不包含任何子节点——如果被复制节点是一个元素节点,这意味着包含在被被复制节点里的所有文本将不会被复制,但属性节点将被复制:
    var para = document.createElement("p");
    var newpara = para.cloneNode(true);
    var newpara2=para.cloneNode(false);

    3.插入节点
    appendChild()方法给元素节点追加一个子节点,它的返回值是一个指向新增子节点的引用指针。
    var para = document.createElement("p");
    var message = document.createTextNode("hello world");
    para.appendChild(message);
    document.body.appendChild(para);
    insertBefore()方法将一个给定节点插入到一个给定原属节点的给定子节点前面,它的返回值是一个指向新增子节点的引用指针:
    reference = element.insertBefore(newNode,targetNode);
    insertBefore()方法不仅可以用来插入新创建的元素,还可以用来挪动文档中的现有节点。
    var container = document.getElementById("content");
    var message = document.getElementById("fineprint");
    var annoncement = document.getElementById("headline");
    container.insertBefore(annoncement,message);
    headline先被删除,然后再被重新插入到content元素所包含的fineprint元素的前面。


    4.删除节点
    removeChild()方法将从一个给定元素里删除一个子节点,它的返回值是一个已经被删除的子节点的引用指针:
    reference = element.removeChild(node);

    var container = document.getElementById("content");
    var message = document.getElementById("fineprint");
    container.removeChild(message);
    如果想删除某个节点,不知道它的父节点是哪一个,parentNode属性可以帮上忙:
    var message = document.getElementById("fineprint");
    var container = message.parentNode;
    container.removeChild(message);


    5.替换节点
    replaceChild()方法将把一个给定父元素里的一个子节点替换为另一个子节点,它的返回值是一个指向已被替换的那个子节点的引用指针:
    reference = element.replaceChild(newChild,oldChild)

    var container = document.getElementById("content");
    var message = document.getElementById("fineprint");
    var para = document.createElement("p");
    container.replaceChild(para,message);

    replaceChild()方法也可以用文档树上的现有节点去替换另一个现有节点。
    var container = document.getElementById("content");
    var message = document.getElementById("fineprint");
    var announcement = document.getElementById("headline");
    container.replaceChild(announcement,message);
    headline替换掉fineprint

    var container = document.getElementById("content");
    var message = document.getElementById("fineprint");
    var announcement = document.getElementById("headline");
    var oldmessage = container.replaceChild(announcement,message);
    container.appendChild(oldmessage);
    headline替换掉fineprint,把fineprint重新再插入content

    6.设置属性节点
    setAttribute()方法为给定元素节点添加一个新的属性值或是改变它的现有属性值:
    element.setAttribute(attributeName,attributeValue)

    var para = document.createElement("p");
    para.setAttribute("id","fineprint");
    var container = document.getElementById("content");
    container.appendChild(para);

    删除属性
    element.removeAttribute("href");

    7.查找节点
    getAttribute()方法将返回一个给定元素的一个给定属性的节点的值:
    attributeValue = element.getAttribute(attributeName)
    getElementById()方法的用途是寻找一个有着给定id属性值的元素,该方法返回的元素节点是一个对象,这个对象有nodeName、nodeType、parentNode、childNodes等属性。
    element = document.getElementById(ID)
    getElementsByTagName()方法的用途是寻找有着给定标签名的所有元素:
    elements = document.getElementsByTagName(tagName)
    这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里的每个元素都是
    一个对象,它们都有着nodeName、nodeType、parentNode、childNodes等属性。
    hasChildNodes方法可用来检查一个给定元素是否有子节点:
    blooleanValue = element.hasChildNodes
    这个方法将返回一个布尔值true或false。

    DOM属性
    1.nodeName属性返回一个字符串,其内容是给定节点的名字:
    name = node.nodeName

    2.nodeType属性返回一个整数,这个数值代表着给定节点的类型:
    integer = node.nodeType

    3.nodeValue属性将返回给定节点的当前值:
    value = node.nodeValue

    遍历节点树
    1.childNodes属性将返回一个数组,这个数组由给定元素节点的子节点构成:
    nodeList = node.childNodes

    2.firstChild属性将返回一个给定元素节点的第一个子节点:
    reference = node.firstChild

    3.lastChild属性将返回一个给定元素节点的最后一个子节点:
    referance = node.lastChild

    4.nextSibling属性将返回一个给定节点的下一个子节点
    referance = node.nextSibling

    5.parentNode 属性将返回一个给定节点的父节点:
    referance = node.parentNode

    6.previousSibling属性将返回一个给定节点的前一个子节点
    referance = node.previousSibling

  • 相关阅读:
    Eclipse之JSP页面的使用
    Eclipse拷贝动态的web工程修改context root的值
    Redis的Cluster配置
    企业大数据战略定位
    批处理引擎MapReduce编程模型
    Python入门篇-基础数据类型之整型(int),字符串(str),字节(bytes),列表(list)和切片(slice)
    Listary 文件操作神器
    TextMesh Pro SpriteAsset Load From Assetbundle
    TextMesh Pro Emoji Align With Text(表情和文字对齐)
    使用Mkdocs构建你的项目文档
  • 原文地址:https://www.cnblogs.com/tuzhiye/p/1398186.html
Copyright © 2020-2023  润新知