创建节点
- 创建节点一般通过 document
var box = document.createElement("div");
- 设置属性
box.style.width = 100 + "px";
box.style.height = 100 + "px";
box.style.background = "yellow";
- 添加节点
添加节点，一般通过它的父节点
var oBody = document.getElementById("obody");
oBody.appendChild(box);
- 删除节点
var oBody = document.getElementById("obody");
oBody.removeChild(box);
- 插入节点
一般也是通过父节点来操作
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var box1 = document.createElement("div");
box1.style.width = 100 + 'px';
box1.style.height = 100 +'px';
box1.style.background = 'pink';
var oBody = document.getElementById("obody");
//第一个参数表示要插入的节点，第二个表示被插入的节点
oBody.insertBefore(box1,box);
}
获取子节点
- -获取 box 下面的子节点，childNodes 获取文本节点，但是我们一般不需要文本节点，需要标签节点,所以我们一般通过 children 来获取子节点，
var myChildren = box.children:
alert(myChilderen.length);
获取兄弟节点
- nextElementSibling: 获取标签元素，但是一般浏览器可以实现对应效果， ie 浏览器不能有对应的效果，但是 nextSibling 可以在 ie 浏览器中获取标签元素，因为兼容关系所以用 逻辑或 来实现
var brotherSym = btn1.nextElementSibling || btn1.nextSibling;
alert(brotherSym);
获取父节点
var btn1 = document.getElementById('btn1');
console.log(btn1.parentNode);
动态创建节点
- 为了避免一起获取同样的标签的时候，需要写很多对应的属性的设置，我们最好把这些属性设置抽取成一个类用来表示这些属性，这就是类的抽取
动态创建节点方式实现九宫格
<script>
/*1.获取按钮和添加盒子的父节点*/
var btns = document.getElementsByTagName('button');
var parentBox = document.getElementById('box');
/*2.操控按钮*/
/*2.1创建一个值用来记录索引，也可叫做记录盒子的个数*/
var index = 0;
btns[0].onclick = function(){
index ++;
//2.1创建盒子
var box = document.createElement('div');
/*2.2设置属性*/
box.style.width = 100 +'px';
box.style.height = 100 +'px';
box.style.background = 'red';
box.style.borderRadius = 10 +'px';
box.style.position = 'absolute';
box.style.display = 'inline-block';
/*2.3设置盒子位置*/
for(var i = 0;i < index;i ++){
/*2.31确定行号和列号*/
var col = parseInt(i%3);
var row = parseInt(i/3);
box.style.left = col *(100 + 10)+'px';
box.style.top = row*(100 +10)+'px';
}
/*2.4添加节点*/
parentBox.appendChild(box);
}
/*3.删除盒子*/
btns[1].onclick = function(){
/*3.1删除节点*/ parentBox.removeChild(parentBox.children[index-1]);
/*3.1为了让每次点击都可以删除最后一个节点，所以我们要--*/
index --;
}
</script>
发布微博实现代码
<script>
/*1.获取标签*/
var box = document.getElementById('box');
var myText = document.getElementById('text');
var btn = document.getElementById('btn');
/*1.1创建ul*/
var oul = document.createElement('ul');
/*1.2添加*/
box.appendChild(oul);
/*2.操控按钮，点击按钮添加li*/
btn.onclick = function(){
/*2.1判断输入的是否有内容，如果没有就提示弹框结束程序*/
var content = myText.value;
if (content ==''){
alert('请输入内容');
return;
}else {
/*2.2创建li*/
var oli = document.createElement('li');
/*2.3设置li的内容*/
oli.innerHTML = content +'<a>删除</a>';
/*2.4添加li*/
/*添加节点的时候，我们需要判断是否有节点，如果没有就直接添加，如果
* 有，要插入到第一个之前*/
if(oul.children.length == 0){
oul.appendChild(oli);
}else { oul.insertBefore(oli,oul.children[0]);
}
}
/*3.点击删除按钮删除对应的li*/
/*3.1获取所有的a*/
var as = document.getElementsByTagName('a');
/*3.2遍历as*/
/*for(初始值，终止值，变化*/
for(var i = 0;i <as.length;++i){
as[i].onclick = function(){
/*this：一般放在事件指令中，表示谁触发了这个事件，一般是事件源*/
/*3.3删除对应的li*/ oul.removeChild(this.parentNode);
}
}
}
</script>
通过类名获取标签2.0
<script>
/*1.通过类名获取标签*/
var box = document.getElementById('box');
// var btns = box.getElementsByClassName('btn');
/*ie浏览器一般不能兼容这个方法getElementsByClassName*/
/*我们可以自己抽取方法来通过类名获取标签*/
function getSymByClassName(dom,classN){
/*2.1判断浏览器是否兼容对应的方法*/ if(dom.getElementsByClassName){
return dom.getElementsByClassName(classN);
}else {
/*当不兼容的时候，我们可以获取所有的标签，然后和类名判断
* 如果要是等于我们设置的类名，我们就把这个标签记录*/
var allSym = dom.getElementsByTagName('*');
/*创建数组用来记录符合条件的标签*/
var attrArray = [];
/*2.2遍历所有的标签，取出每一标签的class比较*/
for(var i = 0;i < allSym.length;i ++){
var eachS = allSym[i];
if (eachS.className == classN){
attrArray.push(eachS);
}
}
return attrArray;
}
}
/*调用方法获取标签*/
var btns = getSymByClassName(box,'btn');
alert(btns);
</script>
网友评论