• document--操作相关元素(js简短汇总3)


    相关元素:obj为当前选定元素,用id获取;script全部放在html后面

    1.obj.nextSibling下一个元素(注意回车与空格)

    2.obj.previousSibling上一个元素(注意回车与空格)

    3.obj.parentNode父级元素。可以改变整体的格式style,内容方面不做改变。

    4.obj.childNodes所有的子级元  

    属性:

    body内的内容:

     <body>
    <div>
    <div>aaa</div><div id="dd">bbbb<span>eeeeee</span><div>fffffff</div></div><div>ccccc</div>
    </div>
    </body>

    obj.firstChild //父级div层中已确定改变第一个子集  

    /*
    var b=document.getElementById("dd");
    b.lastChild.style.backgroundColor="pink";//最后
    b.firstChild.style.backgroundColor="red";//第一
    //寻找id="dd"的div层中;已确定的最后一个子集 或 第一个子集 改变其属性
    */

    obj.lastChild  //父级div层中已确定改变最后一个子集  

    obj.childNode[n]//父级中查找所有子集  

    /* var b=document.getElementById("dd"); var zj=b.childNodes; alert(zj.length); //寻找id="dd"的div层有几个子集 */

    /* var b=document.getElementById("dd"); var zj=b.getElementsByTagName("div"); alert(zj.length); //寻找id="dd"的div层中有几个div标签 */

    /* var b=document.getElementById("dd"); b.innerHTML="";//将id="dd"的div层清空 */

    /* var b=document.getElementById("dd"); var zj=b.getElementsByTagName("div");//查出结果为数组 zj[0].style.backgroundColor="yellow"; //寻找id="dd"的div层中是div标签的背景变为黄色 */

    /* var b=document.getElementById("dd"); var zj=b.childNodes; for(var i=0;i<zj.length;i++) {  if(zj[i].tagName=="DIV")//此处tagName为标签名,必须是大写  {zj[i].style.backgroundColor="blue";} }//寻找id="dd"的div层中是div标签的背景变为蓝色 */

    方法:  

    obj.appendChild(元素对象); //追加元素对象,不是一个HTML的字符串  

    /*
    //追加div层
    var b=document.getElementById("dd");//寻找id="dd"的div
    var n=document.createElement("div");//创建一个新的div层
    n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本
    b.appendChild(n);//给id="dd"的div层以子集方式追加新创建的div层
    */

    d.insertBefore(要插入的元素对象,相对于哪个元素);                

    //上方的d--代表其父级,在父级div层的内部,先写插入的层,在写对应的想显示其前方的对象  

    /*
    var b=document.getElementById("dd");//寻找id="dd"的div
    var n=document.createElement("div");//创建一个新的div层
    n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本
    b.insertBefore(n,b.childNodes[0]);
    //上方的b--代表其父级,在父级div层的内部,先写插入的层,在写对应的想显示其前方的对象
    */

    d.removeChild(要移除的元素对象);//移除在父级div层内的相应子集div层  

    /*
    var b=document.getElementById("dd");//寻找id="dd"的div
    b.removeChild(b.childNodes[0]);
    //移除在父级div层内的相应子集div层
    */

    d.replaceChild(新元素,旧元素);                //上方的d--代表其父级,在父级div层的内部,先写替换内容的层,再写要被替换的对象

    /*
    var b=document.getElementById("dd");//寻找id="dd"的div
    var th=document.createElement("div");//创建新的div层
    th.innerHTML="这是一个要替换的div层!";//给新创建的div层设置文本
    b.replaceChild(th,b.childNodes[0]);
    //上方的b--代表其父级,在父级div层的内部,先写替换内容的层,再写要被替换的对象
    */

     d.getElementsByxxx("id字符串");在子元素中找符合条件的元素。

    如何在子级中找指定的元素?

    1.遍历  2.obj.getElementsByxxxxx;

    如何向元素中追加一个子元素?

    (一)

    1.造个元素。

    var n = document.createElement("div");  //造元素

    n.innerHTML = "this is a new div"; //设内容

    n.style.backgroundColor="green"; //设样式

    2.加进去。 d.appendChild(n); 

    (二)

    var b=document.getElementById("dd");//寻找id="dd"的div

    var n=document.createElement("div");//创建一个新的div层

    n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本

    b.appendChild(n);//给id="dd"的div层以子集方式追加新创建的d

  • 相关阅读:
    PHP变量的使用
    php基础知识一
    PHP之 xampp 安装环境
    自动化测试框架selenium+java+TestNG——配置篇
    代码规范体会篇
    寒假作业2(两篇随笔)
    寒假作业二之自学计划
    寒假作业第二篇随笔(A+B)
    寒假随笔(开启程序设计大佬模式)
    页面即时消息提醒的实现
  • 原文地址:https://www.cnblogs.com/xianshui/p/4451756.html
Copyright © 2020-2023  润新知