目录
关于节点
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
节点至少拥有三个属性：nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值），元素节点：nodeType：1，属性节点：nodeType：2，文本节点：nodeType:3。
获取节点
node.parentNode 返回某节点的父节点，返回最近一个父节点,如果没有父节点返回null
node.childNodes 返回包含指定节点的子节点的集合，返回所有子节点，包括文本节点，元素节点
node.children 只返回所有的子元素节点，其余节点不返回
firstChild 返回第一个子节点，找不到返回null，包含所有节点
lastChild 返回最后一个子节点，找不到返回null，包含所有节点
firstElementChild 返回第一个子元素节点，找不到返回null
lastElementChild 返回最后一个子元素节点，找不到返回null
nextSibling 获取下一个兄弟节点，包含元素节点和文本节点等等
nextElementSibling 获取下一个兄弟元素节点
案例一：下拉菜单（模仿安居客导航）
<style>
*{
margin: 0;padding: 0;
}
.box{
width: 1000px;
display: flex;
position: relative;
left: 100px; top: 30px;
background-color: rgb(44, 186, 39);
}
a{
text-decoration: none;
display: block;
}
.nav>a{
color: #ffffff;
text-align: center;
height: 40px; line-height: 40px;
font-size: 18px;
padding: 0 20px;
position: relative;
}
.nav>div{
border: 1px solid #959595 ;
border-top: 0px;
background-color: #eeeeee;
position: absolute;
padding: 0 10px 15px;
display: none;
}
.nav>div>a{
margin-top: 15px;
padding: 0 15px 0 10px;
}
.nav:hover.nav>a::before{
content: '';
display: block;
width: 14px; height: 10px;
background: url(img/navigation.png) 0 -224px no-repeat;
position:absolute;
left: 42%;
bottom: -5px;
}
.nav>div>div{
padding: 0 10px;
float: left;
}
.nav>div>div>a{
margin-top: 16px;
}
.nav>div>div>a:hover{
color: rgb(241, 147, 74);
}
.nav>div>a:hover{
color: rgb(241, 147, 74);
}
.nav>div>.ditu{
border-top: 1px solid #959595 ;
padding:15px 15px 0 10px ;
}
.nav>.hover{
background-color: rgb(66, 123, 74);
}
</style>
<div class="box">
<div class="nav">
<a>新 房</a>
<div>
<a >新盘</a>
<a >楼讯</a>
<a >热门活动</a>
<a >看房团</a>
<a >房源</a>
<a >商业产地</a>
<a >海外产地</a>
</div>
</div>
<div class="nav">
<a>二手房</a>
<div>
<a >房源</a>
<a >小区</a>
<a class="ditu">地图找房</a>
<a >主题找房</a>
<a >找经纪人</a>
<a>优秀经纪人榜</a>
</div>
</div>
<div class="nav">
<a>租 房</a>
<div>
<a >区域找房</a>
<a >地铁找房</a>
<a class="ditu">地图找房</a>
<a >小区</a>
<a >民宿短租</a>
</div>
</div>
<div class="nav">
<a>商铺写字楼</a>
<div>
<div>
<a>商铺</a>
<a>商铺出租</a>
<a>商铺出售</a>
<a>商铺新盘</a>
</div>
<div>
<a>写字楼</a>
<a>写字楼出租</a>
<a>写字楼出售</a>
<a>写字楼新盘</a>
<a>办公楼盘</a>
</div>
<div>
<a>厂房</a>
<a>厂房出租</a>
<a>厂房出售</a>
<a>厂房转让</a>
</div>
<div>
<a>厂房</a>
<a>厂房出租</a>
<a>厂房出售</a>
<a>厂房转让</a>
</div>
<div>
<a>厂房</a>
<a>厂房出租</a>
<a>厂房出售</a>
<a>厂房转让</a>
</div>
</div>
</div>
</div>
<script>
var nav = document.querySelectorAll('.nav');
for(var i = 0; i < nav.length; i++) {
nav[i].onmouseover = function() {
this.children[0].className = 'hover';
this.children[1].style.display = 'block';
}
nav[i].onmouseout = function() {
this.children[0].className = '';
this.children[1].style.display = 'none';
}
}
</script>
创建和删除节点
document.createElement(‘tagName’) 创建指定的HTML元素
<ul></ul>
<script>
var li = document.createElement("li");//先创建节点
var ul = document.querySelector("ul");
ul.appendChild(li);//在添加节点到指定元素的末尾
li.innerHTML="123";
lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);//添加一个元素在指定子元素之前
</script>
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点
<input type="button" name="" value="删除节点"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var btn = document.querySelector("input");
var ul = document.querySelector("ul");
btn.onclick = function(){
if(ul.children.length==0){
this.disabled = true;
}else{
ul.removeChild(ul.children[0]);
}
}
</script>
案例二：留言板
<style>
.txt{
width: 300px;
height: 200px;
border: 1px solid black;
}
li{
background-color: antiquewhite;
margin-top: 10px;
width: 500px;
}
span{
float: right;
}
a{
float: right;
padding-left: 10px;
}
</style>
<textarea cols="30" rows="10" class="txt"></textarea>
<button>发布</button>
<ul class="lis">
</ul>
<script>
function nowTime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
var day = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
return year+'/'+month+'/'+day+'/'+h+':'+m;
}
var txt = document.querySelector('.txt');
var lis = document.querySelector('.lis');
var btn = document.querySelector('button');
btn.onclick = function() {
var now = nowTime();
if(txt.value.trim() == ''){
alert('输入内容不能为空');
} else {
var li = document.createElement('li');
lis.insertBefore(li,lis.children[0]);
li.innerHTML = txt.value + '<a href="javascript:;">删除</a>' + '<span>'+now+'</span>';
}
var del = document.querySelectorAll('a');
for(var i = 0; i < del.length; i++) {
del[i].onclick = function() {
lis.removeChild(this.parentNode);
}
}
}
</script>
案例三：动态生成表格和输入生成表格
动态生成表格
<style>
table{
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
thead{
background-color: #ccc;
}
th,td{
border: 1px solid #666;
}
tr{
height: 40px;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function Students(name,subject,grade){
this.uname = name;
this.subject = subject;
this.grade = grade;
}
var stu1 = new Students('李一','javascript','40');
var stu2 = new Students('李二','javascript','60');
var stu3 = new Students('李三','javascript','80');
var stu4 = new Students('李四','javascript','100');
var stus = [stu1,stu2,stu3,stu4];
var tbody = document.querySelector('tbody');
//动态生成表格
for(var i = 0; i < stus.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for(var k in stus[i]) {
var td = document.createElement('td');
tr.appendChild(td);
td.innerText = stus[i][k];
}
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = '<a href="javascript:;">删除</a>';
}
var del = document.querySelectorAll('a');
for(var i = 0; i < del.length; i++) {
del[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
按键输入生成表格
<-- 表格样式代码同上 -->
<style>
button{
position: absolute;
right: 400px;
}
</style>
<button>添加信息</button>
<script>
function Students(name,subject,grade){
this.uname = name;
this.subject = subject;
this.grade = grade;
}
function info(){
var uname = prompt('输入姓名');
var subject = prompt('输入科目');
var grade = prompt('输入成绩');
var stu = new Students(uname,subject,grade);
return stu;
}
var tbody = document.querySelector('tbody');
// 按键生成表格
var btn = document.querySelector('button');
btn.onclick = function() {
var stu = info();
var tr = document.createElement('tr');
tbody.appendChild(tr);
for(var k in stu) {
var td = document.createElement('td');
td.innerText = stu[k];
tr.appendChild(td);
}
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = '<a href="javascript:;">删除</a>';
var del = document.querySelectorAll('a');
for(var i = 0; i < del.length; i++) {
del[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
}
</script>
46
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
