zoukankan      html  css  js  c++  java
  • js_DOM操作

    嗯,大过年的上次更新应该还是在,大年30前一天,说好的一天更一篇,感觉食言了,虽然没有更,但是,每天还是坚持在学习的,所以今天的任务就是把这几天学的都发上来。

    博客,我觉得不仅仅是交流知识的地方,我宁愿把它写成我的生活日记。有差的,欢迎拍砖。

    好了,进入正题吧。

    DOM操作,我觉得可以归结成三个,一个标签节点,一个属性节点,一个文本节点。

    这里的

    li 就是标签节点;

    alt就是属性节点;

    第一个是文本节点(不是alt里面的);

    接下来我将分别用两个例子来解释,这三个点。

    我先把html放上来:

    <body>
    		<ul>
    			<li alt="第一个">第一个</li>
    			<li>第二个<br />换行了</li>
    			<li>第三个</li>
    		</ul>
    		<!--<uL id="father"><li>第四个</li><li>第五个</li><li id="tt">第六个</li></uL> 这里我把叠起来,跟下面等会的操作是有区别的-->
    		<uL id="father">
    			<li>第四个</li>
    			<li>第五个</li>
    			<li id="tt">第六个</li>
    		</uL>
    		<button id="dd">点击获取第六个内容</button>
    	</body>
    

    标签节点:

    window.onload = function(){
    			var a = document.getElementById("dd");/*这里就是获取标签节点,获取button按钮,我这里是通过Id,还有其他很多方式,注意一点其他的是类数组*/
    			a.onclick = function(){/*点击事件*/
    				var d = document.getElementById("tt").childNodes[0].nodeValue;/*得到含有id=“tt”的标签,然后他的字节点,看html,只有“第六个”这几个字,这就是文本节点,nodeValue这个就是其所含的内容*/
    				alert(d);/*输出,注意我这里文本节点稍微带了一下*/
    			}
    
                            var por = document.getElementsByTagName("li")/*这是通过标签选择器,得到li标签数组,赋值给por*/
    			alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*输出,得到,por[]数组长度,第一个li标签的名字,第二个li的文本节点的内容*/
    

      

    属性节点,文本节点:

                       /*得到节点*/
    var first = document.getElementsByTagName("li")[0];/*标签选择器得到第一个li标签*/ console.log(first.getAttribute("alt"));/*getAttribute()方法就是得到目标对象的(里面属性)的值*/ /*创建节点*/ var Pcreate = document.createElement("p");/*创建一个p标签*/ var Textcreate = document.createTextNode("我创建了文本节点");/*createTextNode创建文本节点,并赋予内容*/ var Attcreate = document.createAttribute("style");/*createAttribute创建属性,创建的属性是style*/ Attcreate.value = "color:red";/*赋予属性值*/ Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把创建的属性节点放入创建的p标签里*/ Pcreate.appendChild(Textcreate);/*appendchild把创建的文本节点放入p标签里*/ document.body.appendChild(Pcreate);/*然后把p标签放入到body*/

      

  • 相关阅读:
    AngularJS-webapp($q)
    mybatis
    maven联通网络下中央仓库不能访问的解决办法
    IDEA闪退问题
    scala学习笔记(8)文件和正则表达式
    scala学习笔记(8)
    scala学习笔记(7)
    kafka复习(2)
    第一天
    while循环
  • 原文地址:https://www.cnblogs.com/xsk-style/p/6358787.html
Copyright © 2011-2022 走看看