操作dom树
*appendChild方法
添加子节点到末尾 父节点 调用此方法
特点:类似于剪切的效果
代码:
<div id = "div1">
<ul id = "ulid">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
<div id = "div2">
</div>
<input type="button" value="点击吧" οnclick="swap()">
<script type="text/javascript">
function swap()
{
var ul = document.getElementById("ulid");
var div2 = document.getElementById("div2");
div2.appendChild(ul);
}
</script>
点击之后:
*insertBefore(newNode,oldNode)方法
在某个节点之前插入一个新的节点,自己不能插入,需要父节点插入,所以这个方法有父节点调用
两个参数
要插入的节点
在谁之前插入
插入一个节点,节点不存在,就创建
- 创建标签
- 创建文本
- 把文本添加到标签下面
代码:
<div id = "div1">
<ul id = "ulid">
<li id = "li1">first</li>
<li id = "li2">second</li>
<li id = "li3">third</li>
</ul>
</div>
<input type="button" value="点击吧" οnclick="insert()">
<script type="text/javascript">
function insert()
{
var insertli = document.createElement("li");
var text = document.createTextNode("okokok");
insertli.appendChild(text);
var ulid = document.getElementById("ulid");
var li2 = document.getElementById("li2");
ulid.insertBefore(insertli,li2);
}
</script>
点击之后:
*removeChild(子节点):删除节点
自己无法删除自己,只能通过父亲节点删除,所以这个方法时父节点调用的
代码:
<div id = "div1">
<ul id = "ulid">
<li id = "li1">first</li>
<li id = "li2">second</li>
<li id = "haha">hewfuiwefghuiew</li>
<li id = "li3">third</li>
</ul>
</div>
<input type="button" value="点击吧" οnclick="remove()">
<script type="text/javascript">
function remove()
{
var ul = document.getElementById("ulid");
var lihaha = document.getElementById("haha");
ul.removeChild(lihaha);
}
</script>
点击后:
*replaceChild(newNode,oldNode):替换节点,也是由父节点调用
两个参数:
第一个参数:新节点
第二个参数:旧节点
代码:
<div id = "div1">
<ul id = "ulid">
<li id = "li1">first</li>
<li id = "li2">second</li>
<li id = "li3">third</li>
</ul>
</div>
<input type="button" value="点击吧" οnclick="replace()">
<script type="text/javascript">
function replace()
{
var newli = document.createElement("li");
var text = document.createTextNode("第一个");
newli.appendChild(text);
var li1 = document.getElementById("li1");
var ulid = document.getElementById("ulid");
ulid.replaceChild(newli,li1);
}
</script>
点击后:
*cloneNode(boolean):复制节点
代码:
<div id = "div1">
<ul id = "ulid">
<li id = "li1">first</li>
<li id = "li2">second</li>
<li id = "li3">third</li>
</ul>
</div>
<div id = "div2">
</div>
<input type="button" value="点击吧" οnclick="copy()">
<script type="text/javascript">
function copy()
{
var ul = document.getElementById("ulid");
var ulcopy = ul.cloneNode(true);
var div2 = document.getElementById("div2");
div2.appendChild(ulcopy);
}
</script>
点击后:
*innerHTML属性
这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本内容
<p id = "pid">这是一个好孩子</p>
<input type="button" value="点击吧" οnclick="copy()">
<script type="text/javascript">
function copy()
{
var p = document.getElementById("pid");
alert(p.innerHTML);
}
</script>
第二个作用:向标签里面设置内容(可以是html代码)
<p id = "pid">这是一个好孩子</p>
<div id = "div1">
</div>
<input type="button" value="点击吧" οnclick="copy()">
<script type="text/javascript">
function copy()
{
var div1 = document.getElementById("div1");
div1.innerHTML = "<input type = 'text' value = '哈哈哈'>";
}
</script>
点击之后:
案例 动态显示时间
*var date = new Date();
*date.toLocaleString();
需要页面每一秒获取一次时间
*setInterval()
显示到页面上:
每一秒向div里面写一次时间
代码:
function time()
{
var date = new Date();
var timeCN = date.toLocaleString();
var div = document.getElementById("div1");
div.innerHTML = timeCN;
}
setInterval("time()",1000);