付费节点推荐
免费节点
节点使用教程
time:2015/10/28 20：29
今天上午一上午的课，没时间看了，中午玩了两把lol，睡了一觉就到下午3点了，迷迷糊糊的起来继续看，直到晚上才把今天上午的内容看完。下午的看来还得留到明天了。腰都酸了！！！ BY： coder.bing
概要：
1.案例：在末尾添加节点。
2.元素对象
3.Node对象
4.操作DOM树
5.innerHTML属性
6.动态显示时间小案例
1.在末尾添加节点案例
第一步：获取ul标签（document.getElementById）
第二步：创建li标签 （document.createElement）
第三步：创建文本 （document.createTextNode）
第四步：把文本添加到li下面（appendChild）
第五步：把li添加到ul末尾 （appendChild）
<body>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<br />
<input type="button" value="add" onclick="add1();">
<script type="text/javascript">
//在末尾添加节点
function add1()
{
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(text1);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</body>
2.元素对象（element对象）
要操作element对象，必须先获取到element，使用document里面相应的方法获取。
方法：
（1）获取属性里面的值
getAttribute("属性名称");
（2）设置属性的值
input1.setAttribute("class","haha");
（3）删除属性
input1.removeAttribute("name");
×不能删除value里面的值
<body>
<input type="text" name="name1" id="inputid" value="aaaa" />
<script type="text/javascript">
var input1=document.getElementById("inputid");
alert(input1.value);
alert(input1.getAttribute("value"));
alert(input1.getAttribute("name"));
input1.removeAttribute("name");
alert(input1.getAttribute("name"));
</script>
</body>
想要获取标签下面的子标签
使用属性 chaildNodes，但是这个属性兼容性很差
<body>
<ul id="ulid1">
<li>aaaaaaa</li>
<li>bbbbbb</li>
<li>cccccccc</li>
</ul>
<script type="text/javascript">
var ul1=document.getElementById("ulid1");
//var lis=ul1.childNodes;
var lis=ul1.getElementsByTagName("li");
alert(lis.length);
</script>
</body>
获得标签下面子标签的唯一有效方法，使用getElementsByTagName方法
3.Node对象属性
nodeName
nodeType
nodeValue
使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象。
标签节点对应的值
<body>
<span id="spanid">bcoder.cn</span>
<script type="text/javascript">
var span1=document.getElementById("spanid");
alert(span1.nodeType); //1
alert(span1.nodeName); //SPAN
alert(span1.nodeValue); //null
</script>
</body>
属性节点应的值
var id1=span1.getAttribute("id");
alert(id1.nodeType); //2
alert(id1.nodeName); //id
alert(id1.nodeValue); //spanid
文本节点对应的值
var text1=span1.firstChild;
alert(text1.nodeType); //3
alert(text1.nodeName); //#text
alert(text1.nodeValue); //bcoder.cn
4.Node对象属性二（针对标签之间的操作）
父节点
<ul>
<li>bcoder.clbug.com</li>
<li>coder.bing</li>
</ul>
ul是li的父节点(parentNode)
子节点
li是ul的子节点
childNodes： 得到所有子节点，但是兼容性较差
firstChild： 获取第一个子节点
lastChild： 获取最后一个子节点
同辈节点
li直接关系是同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点
previousSibling: 返回一个给定节点的上一个兄弟节点
var li3=document.getElementById("li3");
alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
<body>
<ul id="ulid">
<li id="li1">wwww</li>
<li id="li2">.bcoder</li>
<li id="li3">.cn</li>
</ul>
<script type="text/javascript">
var li1 =document.getElementById("li");
var ul1=li1.parentNode;
alert(ul1.id);
var ul1 = document.getElementById("ulid");
var li1=ul1.firstChild;
alert(li1.id);
var li1=ul1.lastChild;
</script>
</body>
5.操作DOM树
（1）appendChild方法
添加子节点到末尾
特点：类似于剪切粘贴的效果
（2）insetBefore(newNode,oldNode)方法
在某个节点之前插入一个新的节点
两个参数：
要插入的节点
在谁之前插入
<body>
<ul id="ulid">
<li id="li1">西施</li>
<li id="li2">王昭君</li>
<li id="li3">貂蝉</li>
<li id="li4">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1()" />
<script type="text/javascript">
function insert1(){
//获取li3标签
var li3i=document.getElementById("li3");
//创建新的li
var li5i=document.getElementById("li");
//创建文本
var text5i=document.createTextNode("董小碗");
//把文本添加到li下面
li5i.appendChild("text5i");
//获取ul
var ulidd = document.getElementById("ulid");
//插入
ulidd.insertBefore(li5i,li3i);
}
</script>
</body>
（3）removeChild方法 删除节点
function remove1(){
//1.获取li标签
//2.获取父节点ul标签
//4.执行删除（通过父节点）
var li11=document.getElementById("li1");
var ulidd=document.getElementById("ulid");
ulidd.removeChild(li11);
}
（4）replaceChild(newNode,olNodel)方法：替换节点
不能自己替换自己，通过父节点替换
步骤：
1.获取要替换的li
2.创建新标签li
3.创建文本
4.把文本添加到新的li下面
5.获取ul
6.替换节点
（5）cloneNode(boolean) 复制节点
//操作：把ul列表复制到另一个div里面去
1.获取ul （document.getElementById）
2.执行复制方法cloneNode方法复制true （ull.cloneNode(true)）
3.吧复制之后的内容方法div里面去（appendChild）
操作dom总结：
获取节点方法：
getElementById()
getElementsByName()
getElementsByTagName()
插入节点的方法：
insertBefore()
appendChild()
替换节点方法：
replaceChild()
6. innerHTML属性
这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
var span1=document.getElementById("sid");
alert(span1.innerHTML);
第二个作用： 向标签里设置内容(可以是html代码)
//操作：向div里面设置内容
//获取div
var div11 = document.getElementById("div11");
div.innerHTML="<h1>bcoder.cn</h1>";
7.案例：动态显示时间
（1）得到当前时间：
var date=new Date();
var d1=date.toLocaleString();
（2）需要让页面每一个秒获取时间
setInterval方法 定时器
（3）显示到页面上
每一秒向div里面写一次时间，使用innerHTML
代码：
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1(){
var date=new Date();
var dl=date.toLocaleString();
var div1=document.getElementById("times");
div1.innerHTML=dl;
}
//使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
</script>
</body>
显示效果：2015/10/28 下午11:48:37
未经允许不得转载：Bcoder资源网 » 实习javaweb前准备：第四天javascript
评论前必须登录！
登陆 注册