<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建节点</title>
<style>
div{
width: 600px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="节点" id="btn"/>
<div>
<ul id="ul">
<li>1</li>
<li>2</li>哈哈哈
<li id="li">3</li>很更
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script>
//节点一般包括标签，属性，文本内容
//元素为标签和标签里面包含的内容
//节点的范围比元素大
var btn=document.getElementById('btn');
var ul=document.getElementById('ul');
var li=document.getElementById('li')
btn.οnclick=function(){
console.log(ul.childNodes);//输出儿子节点，数组类型，长度为11个
console.log(ul.children) //输出儿子元素，数组类型，长度为5个
console.log(li.parentNode);//输出父亲节点
console.log(li.parentElement) //输出父亲元素 两个结果一致
console.log(ul.firstChild); //输出的子父元素第一个节点
console.log(ul.firstElementChild); //输出的是父元素的第一个标签
//lastchild和lastchildelement类似
console.log(li.nextSibling); //输出元素的下一个节点，输出内容很更
console.log(li.nextElementSibling); //输出元素的下一个元素，输出内容为元素
//如果是ie8和ie8以下的游览器，使用element.nextSibling输出的是下一个节点
//使用element.nextElementSibing输出的是undefined
console.log(li.previousSibling);
console.log(li.previousElementSibling);
//和下一个节点操作类似
var new_node=document.createElement('li');//创建li标签
new_node.innerHTML='6';
ul.appendChild(new_node); //节点追加操作
var span=document.createElement('span');
span.innerHTML='span';
ul.insertBefore(span,li); //在li节点之前插入span节点，insertAfter类似
ul.removeChild(li); //删除一个节点
//为元素添加绑定事件
//原因：当为一个元素注册相同的点击事件时，只会执行后面注册的
ul.addEventListener('click',function(){
console.log('我被点击了+1');
},false);
ul.addEventListener('click',function(){
console.log('我被点击了+2');
},false);
//这个事件监听在ie8和ie8以下不能使用，要换方法
// ul.attachEvent('onclick',function(){
// console.log('我被点击了+3');
// })
// ul.attachEvent('onclick',function(){
// console.log('我被点击了+4');
// })
}
</script>
</html>
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
