1.Dom常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="list">
<li>哪吒</li>
<li>金吒</li>
<li>木吒</li>
<li class="far">李靖</li>
</ul>
</body>
</html>
<script type="text/javascript">
var list = document.querySelector('.list');
console.log(list.childNodes);
console.log(list.children);
console.log(list.firstChild);
console.log(list.firstElementChild);
console.log(list.lastChild);
console.log(list.lastElementChild);
console.log(list.parentNode);
console.log(list.parentElement);
var far = document.querySelector('.far');
far.onclick = function(){
// this.parentElement.style.display = 'none';
this.parentNode.style.display = 'none';
};
</script>
2.兄弟属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟属性</title>
</head>
<body>
<ul id="list">
<li>宋江</li>
<li>卢俊义</li>
<li class="sun" id="sun">公孙胜</li>
<li>吴用</li>
<li>鲁智深</li>
<li>林冲</li>
</ul>
<p id="bai">
赵钱孙李
周吴郑王
冯陈褚卫
蒋沈韩杨
</p>
</body>
</html>
<script type="text/javascript">
// var sun = document.querySelector('.sun');
var sun = document.getElementById("sun");
console.log(sun.nextSibling);
console.log(sun.nextElementSibling);
console.log(sun.previousSibling);
console.log(sun.previousElementSibling);
//封装一个firstElementChild,要求是兼容ie和标准浏览器
function getFirstElementChild(ele){
// 如果参数不存在
if(!ele){
return null;
}
//参数存在
var f = ele.firstChild;
while(f.nodeType!=1){
f = f.nextSibling;
// 如果子节点全部遍历一遍,仍然没有元素节点
if(f==null){
return null;
}
}
return f;
}
var list = document.getElementById("list");
console.log(getFirstElementChild(list));
var p = document.getElementById("bai");
console.log(getFirstElementChild(p));
var s = 1;
for(var i=1;i<6;i++){
s*=i;
}
console.log('5的阶乘是'+s);
// 使用递归算法,注意递归一定要有结束时机
// 递归:函数中调用该函数自己,一定要有结束时机
function digui(n){
if(n==1){
return 1;
}
return n*digui(n-1);
}
console.log('10的阶乘是'+digui(10));
// 采用递归的方式,获取上一个兄弟元素,要求兼容 ie低版本
function getPrev(ele){
if(!ele){
return null;
}
//获取元素的上一个节点
var p = ele.previousSibling;
// 判断p是否存在
if(!p){
return null;
}
return p.nodeType==1?p:getPrev(p);
}
console.log(getPrev(sun));
var node = p.childNodes[0];
console.log(getPrev(node));
// 获取第一个子元素
function getFirst(ele){
if(!ele){
return null;
}
//参数存在
var f = ele.firstChild;
if(f.nodeType==1){
return f;
}else{
return getNext(f);
}
}
function getNext(ele){
if(!ele){
return null;
}
//获取元素的下一个节点
var p = ele.nextSibling;
// 判断p是否存在
if(!p){
return null;
}
return p.nodeType==1?p:getNext(p);
}
</script>
3.节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点操作</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wp {
width:200px;
height: 200px;
background: #04BE02;
border: 1px #f00 solid;
margin:20px auto 0;
}
#cont {
width:100px;
height: 100px;
background: #ff0;
}
#content {
width:400px;
border: 1px #f00 solid;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
}
.son,.child {
width:100px;
height:100px;
margin:10px;
background: #04BE02;
color: #fff;
font-size:50px;
}
.child {
background: #f00;
}
.aa {
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="wp"></div>
<ul id="list">
</ul>
<div id="content"></div>
<button id="btn">点击添加</button>
<button id="btn1">点击插入元素</button>
<button id="btn2">点击添加图片</button>
</body>
</html>
<script type="text/javascript">
var wp = document.getElementById("wp");
wp.innerHTML += '<div id="cont"></div>';
var cont = document.getElementById("cont");
cont.onclick = function(){
alert(123);
};
console.time('运行时间');
wp.innerHTML = '<div id="cont"></div>';
console.timeEnd('运行时间');
var list = document.getElementById("list");
var html = '';
console.time('运行时间1');
for(var i=0;i<2;i++){
// list.innerHTML +='<li>'+i+'</li>'; 1.14ms
// html+='<li>'+i+'</li>'; 1 ms
var li = document.createElement('li');
li.innerHTML = i;
list.appendChild(li);
}
// list.innerHTML = html;
console.timeEnd('运行时间1');
var btn = document.getElementById("btn");
var content = document.getElementById("content");
var n = 0;
btn.onclick = function(){
n++;
var son = document.createElement('div');
son.className = 'son';
son.onclick = function(){
alert(n);
};
son.innerText = n;
content.appendChild(son);
};
var m = 0;
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
m++;
var son2 = content.children[1];
var div = document.createElement('div');
div.className = 'child';
div.innerHTML = m;
content.insertBefore(div,son2);
};
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var img = document.createElement('img');
img.src = '../images/a.jpg';
img.className = 'aa';
var body = document.body;
body.insertBefore(img,btn2);
};
</script>
4.发表评论效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发表评论</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#say {
width:600px;
height:60px;
}
#wp {
width:800px;
margin:50px auto 0;
border:1px #f00 solid;
}
#wp div {
margin:10px;
padding:10px;
line-height:30px;
border-radius:20px;
background:#f0f0f0;
}
</style>
</head>
<body>
<textarea id="say"></textarea>
<button type="button" id="btn">点击</button>
<div id="wp">
</div>
</body>
</html>
<script type="text/javascript">
var say = document.getElementById('say');
var btn = document.getElementById('btn');
var wp = document.getElementById('wp');
btn.onclick = function(){
// trim() 去掉左右两边的空格
var val = say.value.trim();
if(val==''){
alert('请输入内容');
return;
}
var son = document.createElement('div');
son.innerHTML = val;
// 获取第一个子元素
var first = wp.firstElementChild;
// 把son插入到第一个子元素之前
wp.insertBefore(son,first);
say.value = '';
};
</script>
5.删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除节点</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wp {
width:200px;
height: 200px;
background: #04BE02;
border: 1px #f00 solid;
margin:20px auto 0;
}
#wp div {
width:100px;
height:50px;
background:#ff0;
margin:30px auto;
}
#wp .col {
background: #f60;
}
.abc {
width:200px;
height:200px;
background: #FF6600;
margin:30px auto;
}
</style>
</head>
<body>
<div id="wp">
<div>1</div>
<div>2</div>
</div>
<button id="btn">点击删除</button>
<button id="btn1">点击替换</button>
<button id="btn2">点击克隆</button>
<div class="abc">
<ul>
<li>
<div>克隆</div>
</li>
</ul>
</div>
<button id="btn3">点击克隆</button>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById('btn');
var wp = document.getElementById('wp');
btn.onclick = function(){
var ele = wp.firstElementChild;
var back = wp.removeChild(ele);
console.log(back);
};
var btn1 = document.getElementById('btn1');
btn1.onclick = function(){
var div = document.createElement('div');
div.className = 'col';
//获取要被替换的元素
var first = wp.children[0];
var back = wp.replaceChild(div,first);
console.log(back);
};
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
var first = wp.children[0];
var ele = first.cloneNode(true);
console.log(ele);
};
var abc = document.querySelector('.abc');
abc.onclick = function(){
alert('此处无法克隆');
};
var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
var body = document.body;
var clon = abc.cloneNode(true);
var back = body.insertBefore(clon,btn3);
console.log(back);
};
</script>