节点的创建以及添加
- 创建节点:
一般创建一个节点我们通过document.createElement()。
- 添加节点:
一般是这个被创建标签的父亲节点来添加我们创建的节点,通过appendChild()。
1.创建一个div盒子
var box = document.createElement('div');
2.利用div的父节点来添加div
obody.appendChild(box);
- 删除节点:
删除节点的相关的操作,一般通过父节点来操作,通过removeChild()。
var oBody = document.getElementById('obody');
oBody.removeChild(box);
- 插入节点:
插入节点,也是通过父节点来操作,通过insertBefore()。
有两个参数,第一个参数表示要插入的节点,第二个被插入的节点。
var box1 = document.createElement('div');
oBody.insertBefore(box1,box);
把叫做box1的div插入到box之前。
克隆节点
- cloneNode():
- 如果不传入参数,默认为false,那么只是克隆节点本身,不会克隆子节点
- 如果传入true,会克隆节点本身和子节点
获取子节点
- childNodes是获取文本节点。
- 我们一般通过children获取标签子节点。
- 例子:
HTML:
<div id="box">
<button id="btn1"></button>
<button></button>
<button></button>
</div>
JS:
var box = document.getElementById('box');
var myChildren = box.children;
获取兄弟节点
- nextElementSibling:获取标签元素,但是只有一般浏览器可以实现对应的效果ie浏览器不能有对应的效果。
- nextSibling:可以在ie获取标签元素
- 兼容写法:
var brotherSym = btn1.nextElementSibling||btn1.nextSibling;
获取父亲节点
var btn1 = document.getElementById('btn1');
var parentSym = btn1.parentNode;
date对象的认识
- var myDate = new Date():
创建时间对象,表示的是当前的时间。
- myDate.getTime():
当前时间的时间戳,获取的是当前时间到1970一月一号开始的毫秒数。
时间对象的相关的属性和方法
var myDate = new Date();
* 3.获取月份,月份的时间是0-11
``` var month = myDate.getMonth()+1;
获取的月份时间是0-11,所以我们要加上1才能显示正确的月份
* 5.获取星期,注意0表示周日,其余一样
```var weekDay = myDate.getDay();
* 7.获取分钟
```var minute = myDate.getMinutes();
* 9.获取毫秒
```
var minS = myDate.getMilliseconds();
简单日历的制作
HTML:
<div class="box" id="box">
<p id="oP">dasfdsa</p>
<span id="oSpan">dasf</span>
</div>
JS:
var oP = document.getElementById('oP');
var oSpan = document.getElementById('oSpan');
/*2.回去当前的时间设置内容*/
var myDate = new Date();
/*2.1获取年月日星期*/
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var day = myDate.getDate();
var weekDay = myDate.getDay();
/*2.2显示对应的日期*/
/*2.2设置一个星期数组,用来设置星期*/
var weekDayS = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
oP.innerHTML = year+'年'+month +'月'+day +'日'+ weekDayS[weekDay];
/*2.3设置对应的日期*/
oSpan.innerHTML = day;
网友评论