JavaScript练习:在末尾添加节点、元素对象(element)、Node对象属性
程序员文章站
2022-03-10 19:12:38
JavaScript练习:在末尾添加节点、元素对象(element)、Node对象属性
19、练习1:在末尾添加节点
1)获取ul标签
2...
JavaScript练习:在末尾添加节点、元素对象(element)、Node对象属性
19、练习1:在末尾添加节点 1)获取ul标签 2)创建li标签 document.createElement("标签名称"); 3)创建文本 document.createTextNode("文本内容"); 4)把文本添加到li下面 使用appendChild(); 5)把li添加到ul末尾 使用appendChild(); 20、元素对象(element) ** 要操作element,首先必须要先获取到element -使用document中的相应方法获取 ** 方法 *** 获取属性里面的值 getAttribute("属性名称"); - var input=document.getElementById("inputid"); //alert(input.value); alert(input.getAttribute("value")); *** 设置属性的值 input.setAttribute("class","haha"); *** 删除属性 input.removeAttribute("name"); * 不能删除value ** 获取标签下的子标签 *** 使用属性 childNodes 但是这个属性的兼容性很差 var ul=document.getElementById("ulid"); //获取ul下的子标签 var lis=ul.childNodes; alert(lis.length); *** 获得标签下面子标签的唯一有效办法,使用getElementsByTagName方法 var ul=document.getElementById("ulid"); //获取ul下的子标签 var lis=ul.getElementsByTagName("li"); alert(lis.length); 21、Node对象属性 * nodeName * nodeType * nodeValue * 使用dom解析html对象的时候,需要把html里面的标签、属性和文本都封装成对象 * 标签节点对应的值 nodeType:1 nodeName:大写的标签名称 比如 SPAN nodeValue:null * 属性节点对应的值 nodeType:2 nodeName:属性名称 nodeValue:属性的值 * 文本节点对应的值 nodeType:3 nodeName:#text nodeValue:文本内容 <ul> <li>aaaa</li> <li>bbbb</li> </ul> * 父节点 - ul是li的父节点 - parentNode var li= document.getElementById("li"); var ul=li.parentNode; alert(ul.id); * 子节点 - li是ul的子节点 - childNodes:得到所有子节点,但是兼容性较差 - firstChild:获取第一个子节点 var ul=document.getElementById("ulid"); var li=ul.firstChild; alert(li.id); - lastChile:获取最后一个子节点 var ul=document.getElementById("ulid"); var li=ul.lastChild; alert(li.id); * 同辈节点(兄弟节点) - li直接关系是同辈节点 - nextSibling:返回一个给定节点的下一个兄弟节点 previousSibling:返回一个给定节点的上一个兄弟节点 var li=document.getElementById("li"); alert("li.nextsibling.id"); alert("li.previousSibling"); 22、操作dom树 ** appendChild(); - 添加子节点到末尾 - 特点:类似于剪切粘贴的效果 ** insertBefore(newNode,oldNode); - 在某个节点之前插入一个新的节点,通过父节点来调用 - 两个参数 - 插入新的节点,步骤如下 1、创建标签 2、创建文本 3、把文本添加到标签下面 var li3=document.getElementById("li3"); var li5=document.createElement("li"); //创建新的标签,命名为li5 var text5=document.createTextNode("aaa"); li5.appendChild("text5"); var ul=document.getElementById("ul"); ul.insertBefore(li5,li3); //通过父节点来调用 ** 但是没有insertAfter();方法 ** removeChild()方法:删除节点 - 通过父节点删除,不能自己删除自己 var li=document.getElementById("li"); var ul=document.getElementById("ul"); ul.removeChild(li); ** replaceChild(newNode,oldNode); 替换节点 - 通过父节点替换,不能自己删除自己 - 两个参数 var oldLi=document.getElementById("li"); var newLi=document.createElement("li"); var newText=document.createTextNode("这是新节点"); newLi.appendChild(newText); var ul=document.getElementById("ul"); ul.replaceChild(newLi,oldLi); ** cloneNode(boolean); 复制节点 1、获取到ul 2、执行复制方法 clonNode 方法复制 true 3、把复制之后的内容放到p里面去 1)获取到p 2)appendChild(); var ul=document.getElementById("ulid"); var ulcopy=ul.cloneNode(true); var p=document.getElementById("pid"); p.appendChild("ulcopy"); ** dom总结 - 获取节点 getElementById();通过节点的id属性,查找对应节点 getElementsByName();通过节点的name属性,查找对应节点 getElementsByTagName();通过节点名称,查找对应节点 - 插入节点 insertBefore():在某个节点之前插入 appendChild():在末尾添加,相当于剪切粘贴 - 删除节点 removeChild():通过父节点删除 - 替换节点 replaceChild():通过父节点替换 23、innerHTML属性 * 这个属性不是dom的组成部分,但是大多数浏览器都支持,兼容性强 作用1:获取文本内容 ** //获取span标签的内容 var span1=document.getElementById("spanid"); alert(span1.innerHTML); 作用2:向标签里面设置内容(可以是html代码) ** //向p里面设置内容 var p=document.getElementById("pid"); p.innerHTML="<h1>aaa</h1>"; 或者 var p=document.getElementById("pid"); var h="<h1>aaa</h1>"; p.innerHTML=h; 24、练习:动态显示时间 * 得到当前时间 var date=new Date(); var d1=date.toLocaleString(); * 需要让页面每一秒钟获取时间 setInterval() 定时器 * 显示到页面上 每一秒向p里面写一次时间 * 使用innerHTML属性 * 代码 function getDate(){ //当前时间 var date=new Date(); //格式化 var d1=date.toLocaleString(); //获取p var p1=document.getElementById("times"); p1.innerHTML=d1; } //使用定时器实现每一秒写一次时间 setInterval("getDate();",1000);
上一篇: 在Windows上安装MySQL
下一篇: python列输出转为行输出