xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 56net亚洲必赢游戏:DOM节点操作,学习JS中的DOM节

56net亚洲必赢游戏:DOM节点操作,学习JS中的DOM节

发布时间:2019-08-01 07:52编辑:计算机尝试浏览(79)

    DOM操作在JS中得以视为特别普及了吧,比较多网页的小成效的落到实处,例如部分因素的增加和删除操作等都得以用JS来达成。那么在DOM中大家要求明白些什么技艺成就部分效果的贯彻吗?今日那篇小说就先轻松的带大家入一下JS中DOM操作的门吧!!

    1.访问节点

    1.Javascript刨除节点

    html代码:

    一、DOM树的节点

    document.getElementById(id);
    返回对拥有指定id的第一个对象进行访问
    
    document.getElementsByName(name);
    返回带有指定名称的节点集合
    注意:Elements
    
    document.getElementsByTagName(tagname);
    返回带有指定标签名的对象集合
    注意:Elements
    
    document.getElementsByClassName(classname);
    返回带有指定class名称的对象集合
    注意:Elements
    

    在Javascript中,只提供了一种删除节点的措施:removeChild()。

    <body onload ="loaded12()">
    <form name="form1" action="http://www.baidu.com" method="post">
        姓名:<label ><input type="text" name="name"/></label><br/>
        年龄:<label ><input type="text" name="age"/></label><br/>
        <input type="submit" name="submit" value="提交" onclick="submitClick()" />
        <input type="reset" name="reset" value="重置"/>
        <input type="image" name="image">
    </form>
    <h1 id="title">好人一生平安</h1>
    </body>
    

    1、 DOM节点分为三大类: 成分节点(标签节点)、属性节点和文件节点。

    2.生成节点

    removeChild() 方法用来删除父节点的多个子节点。

    遍历节点 

    品质节点和文件节点都属于成分节点的子节点。 因而操作时,需先选七月素节点,再修改属性和文件。

    document.createElement(eName);
    创建一个节点
    
    document.createAttribute(attrName);
    对某个节点创建属性
    
    document.createTextNode(text);
    创建文本节点
    

    语法:parent.removeChild(thisNode)

    function loaded12(){
        var txt="";
        var c=document.body.childNodes;
        for (i=0; i<c.length; i  )
          {
              txt=txt   c[i].nodeName   "-"   c[i].nodeType  "-" c[i].nodeValue "   ";
          };
           alert(txt);
    }
    

    56net亚洲必赢游戏:DOM节点操作,学习JS中的DOM节点以及操作。【查看成分节点】

    3.加多节点

    例子1

     56net亚洲必赢游戏 1

    1、 使用getElement体系措施:

    document.insertBefore(newNode,referenceChild);
    在某个节点前插入节点
    
    parentNode.appendChild(newNode);
    给某个节点添加子节点
    

    var list=document.getElementById("myList");

    转移节点的值:下边两句代码等价

    具体的HTML代码如下图:

    4.复制节点

    list.removeChild(list.childNodes[0]);

     document.getElementById("title").childNodes[0].nodeValue= "我是标题";
    
    document.getElementById("title").innerHtml="我是标题";
    

    56net亚洲必赢游戏 2

    cloneNode(true | false);
    复制某个节点
    参数:是否复制原节点的所有属性
    

     

     

    //通过ID来查看元素属性
    var li = document.getElementById("first"); 
    //通过类名来查看元素属性
    var lis1 = document.getElementsByClassName("cls");
    //通过名字来查看元素属性
    var lis2 = document.getElementsByName("name");
    //通过标签名来查看元素属性
    var lis3 = document.getElementsByTagName("li");
    

    5.删减节点

    例子2

     退换属性:

    注意事项:

    parentNode.removeChild(node)
    删除某个节点的子节点
    node是要删除的节点
    注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题。这时候,就需要用一个函数来判断首个子结点的节点类型。
    元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
    

    var thisNode=document.getElementById("demo");

    document.getElementById("title").childNodes[0].nodeValue= "我是标题";//下面两句等价
    document.getElementById("title").setAttribute("style","background: red;");
    document.getElementById("title").style.background="red";
    

    ① ID无法重名,要是ID重复,只可以取到第三个。

    6.改换文件节点

    thisNode.parentNode.removeNode(thisNode);

    加多节点:

    ② 获取元晚秋点时,必须等到DOM树加载成功后本事博得。

    appendData(data);
    将data加到文本节点后面
    
    deleteData(start,length);
    将从start处删除length个字符
    
    insertData(start,data)
    在start处插入字符,start的开始值是0;
    
    replaceData(start,length,data)
    在start处用data替换length个字符
    
    splitData(offset)
    在offset处分割文本节点
    
    substringData(start,length)
    从start处提取length个字符
    

     

    var tilte = document.getElementById("title");
    img = document.createElement("IMG");
    img.src="123.png";
    title.appendChild(img);
    

    二种管理格局:

    7.属性操作

    2.Javascript创办节点

     

    a.将JS写在文档最终;

    getAttribute(name)
    通过属性名称获取某个节点属性的值
    
    setAttribute(name,value);
    修改某个节点属性的值
    
    removeAttribute(name)
    删除某个属性
    
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <title>HTML DOM</title>
       <script type=text/javascript>
       function   Load_message()
       {
        var oimg=document.getElementById("a");
           alert(oimg.getAttribute("border"));
        oimg.setAttribute("alt","DOM Test");
       }
       </script>
    </head>
    <body onload="Load_message();">
       <img border="0" width="100" height="150" id="a"/>
    </body>
    </html>
    

    createElement()用来创立三个因晚秋点,即 nodeType=1 的节点。

     

    b.将代码写入window.onload函数中;

    8.查找节点

    语法:document.createElement(tagName)

    var msg ="提示,我是好人,我要回家******8啦啦啦啦啦啦啦。。。。。。";
    var newpncode = document.createElement("p");
    var newtext = document.createTextNode(msg);
    newpncode.appendChild(newtext);
    var body = document.getElementById("body");
    body.appendChild(newpncode);
    

    ③ 通过getElements种类取到的为数组格式,操作时务必取到个中的每一个要素,才干开始展览操作,而不能够直接对数组举行操作。

    parentObj.firstChild
    如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用
    parentObj.firstChild.firstChild.....
    
    parentObj.lastChild
    获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用
    parentObj.lastChild.lastChild.....
    
    parentObj.childNodes
    获得节点的所有子节点,然后通过循环和索引找到目标节点
    

    里面,tagName 为HTML标签的名称,并将回来贰个节点目的。

     

    document.getElementsByTagName("li")[0].click = function(){}
    

    9.获得相邻的节点

    诸如,创立<div>标签和<p>标签的讲话如下:

    剔除节点:注意url中间不可能有空格,不然第二回删除的是单手节点,可是在ie上不解析空白节点,是不曾难题的

    ④ 这一种类措施,也足以先选中二个DOM节点,在从入选的DOM节点中,采取要求的节点:

    neborNode.prev
    iousSibling :获取已知节点的相邻的上一个节点
    nerbourNode.nextSlbling: 获取已知节点的下一个节点
    

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

    <ul id="myList"><li>购物</li><li>游戏</li><li>电影</li></ul>
    <p id="demo">wohsi fwapgje53</p>
    <input type="button" value="开始遍历" onclick="deleteNodes()">
    
    <script type="text/javascript">
    function deleteNodes(){
    
        var list=document.getElementById("myList");
        list.removeChild(list.childNodes[0]);
    
    }
    </script>
    
    document.getElementById("div1").getElementsByTagName("li");
    

    10.获得父节点

    var ele_p=document.createElement("p");

     

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:56net亚洲必赢游戏:DOM节点操作,学习JS中的DOM节

    关键词: 日记本 js 699net必赢

上一篇:MySQ登录提示ERROR,错误解决方法

下一篇:没有了