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);
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论