当前位置:首页 > Windows程序 > 正文

JS dom最常用API

2021-05-26 Windows程序

//document方法:
    var cont = document.getElementByIdx_x(‘cont‘);

    //className给标签添加class
    cont.className = ‘fcolor‘;

    //setAttribute方法可以添加一些属性,但是不是css样式哦!
    var a_id = document.getElementByIdx_x(‘a_id‘);
    a_id.setAttribute(‘href‘,‘‘);

    //getAttribute所产生的内容
    var a_att = a_id.getAttribute(‘href‘);
    document.write(‘getAttribute所产生的内容:‘ + a_att + ‘<br>‘ + ‘<br>‘);

    //removeAttribute所产生的内容
    var a_att = a_id.removeAttribute(‘href‘);
    document.write(‘removeAttribute后所产生的内容:‘ + a_att + ‘<br>‘ + ‘<br>‘);

    //innerHTML获得html内容
    document.write(‘innerHTML所产生的内容:‘ + cont.innerHTML + ‘<br>‘);

    //getElementsByTagName_r()方法返回带有指定标签名的对象的集合,不常用
    var div = document.getElementsByTagName_r(‘div‘);
    document.write(‘getElementByTagName()所产生的内容:‘ + div.length + ‘<br>‘);

    //document.body返回body元素标记
    var dom_body = document.body;
    dom_body.setAttribute(‘bgcolor‘,‘#186376‘);

    
    var txt = dom_body.createTextNode(‘dfsdfsdjffdsf‘);
    var p = dom_body.createElement_x(‘p‘);
    p.appendChild(txt);
    dom_body.appendChild(p);

----------------------------------------------------------------------------

document方法:

getElementById(id) Node 返回指定结点的引用

getElementsByTagName_r(name) NodeList 返回文档中所有匹配的元素的集合

createElement_x(name) Node Node

createTextNode(text) Node 创建一个纯文本结点

ownerDocument Document 指向这个节点所属的文档

documentElement Node 返回html节点

document.body Node 返回body节点

element方法:

getAttribute(attributeName) String 返回指定属性的值

setAttribute(attributeName,value) String 给属性赋值

removeAttribute(attributeName) String 移除指定属性和它的值

getElementsByTagName_r(name) NodeList 返回结点内所有匹配的元素的集合

node方法:

appendChild(child) Node 给指定结点添加一个新的子结点

removeChild(child) Node 移除指定结点的子结点

replaceChild(newChild,oldChild) Node 替换指定结点的子结点

insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点

hasChildNodes() Boolean 如果结点有子结点则返回true

node属性:

nodeName String 以字符串的格式存放结点的名称

nodeType String 以整型数据格式存放结点的类型

nodeValue String 以可用的格式存放结点的值

parentNode Node 指向结点的父结点的引用

childNodes NodeList 指向子结点的引用的集合

firstChild Node 指向子结点结合中的第一个子结点的引用

lastChild Node 指向子结点结合中的最后一个子结点的引用

previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null

nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,,那么该值为null

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/71379.html