• dom元素和方法总结


    主要是参考《精通javascript》。

    全局变量有:

    document。这个变量包含浏览器的html dom文档的引用。

    HTMElement

     这个变量是所要html dom 元素的超类对象,扩展这个变量的原型prototype就可以扩展所有的html dom元素。

    HTMLElement.prototype.newFunciton=function() {.......};

    dom操作如下:

    body document.body直接执行body元素。

    getElementById

    getElementsByTagName

    childNodes. 下面展示了如何使用childNodes属性为一个父元素的所有子元素增加样式

    var c=document.body.childNodes;

    for(var i=0;i<c.lenght;i++{

     if(c[i].nodeType==1)//确保该节点是一个元素

         c[i].style.border="1px solid red";

    documentElement         指向的是html。

    firstChild            指向第一个子元素,如果元素没有子节点,则firstChild为null

    从一个元素中删除所有子节点

    var e=document.getElementById("body");

    while(e.firstChild)

        e.removeChild(e.firstChild);

    lastChild 如果不存在子节点,则为null。

    下面演示了使用lastChild来为文档插入元素的例子:

    创建一个新的div元素并插入到body最后一个元素之前

    var n=document.createElement("div");

    n.innerHTML=“thanks for visiting!";

    document.body.insertBefore(n,document.body.lastchild);

    nextSibing 指向下一个兄弟节点

    parentNode 

    previousSibing

    dom操作属性

    className

    getAttribute(attrName)

    removeAttribute(attrNmame) 同setAttribute(atrr,"");设置为空字符串一样。

    setAttrbute(atrr,value)

    dom修改

    appendChild appendchild必须在你所期望追加的元素上调用。

    cloneNode(true|false)  

    该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点

    查找文档的第一个ul元素,完全复制它,并追加到ul之后

    var ul=document.getElementsByTagName("ul")[0];

    //clone节点并追加到旧元素的后面

    ul.parentNode.appendChild(ul.cloneNode(true) );

    createElement(tagNasme)

    createElementNS

    createTextNode(textString)

    innerHTML

    insertBefore(nodeToInsert,nodeToInsertBeforE)

     这是一个用来在文档任意地方插入dom节点函数,该函数必须在你希望插入到前面元素的父元素上调用

    经常这么用

    elem.parentNode.insertBefore(newNode,ul);

    removeChild(nodeToremvoe); 该函数必须在你希望删除节点的父元素上调用。

    div.parentNode.removeChild(div);

    replaceChild(noteToInsert,nodeToRepalce); 该函数必须在你需要替换的节点的父元素上调用。

    //查找文档中的所有<a>连接
    var a=document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++)
    {
        //创建一个strong对象
        var s=document.createElement("strong");
        
        //使内容为<a>的url
        s.appendChild( document.createTextNode( a[i].href ) );
        
        //使用<strong>元素替换<a>元素
        a[i].parentNode.replaceChild(s,a[i]);
    }

    原书上有错误,写的是a[i].replacechild(s,a[i]); 错误之处在于replaceChild必须在被替换元素的父元素上调用。

  • 相关阅读:
    十分钟上手-搭建vue开发环境(新手教程)
    二叉树基本操作C代码
    javaScript改变HTML
    javaScript查找HTML元素
    javaScript示例
    javaScript语法基础
    jsp useBean
    +Java中的native关键字浅析(Java+Native+Interface)++
    在myeclipse中拷贝一个工程,修改部署的名字
    解压版mysql安装
  • 原文地址:https://www.cnblogs.com/youxin/p/3354424.html
Copyright © 2020-2023  润新知