2017-03-11 JS学习笔记 am

创建节点

• 创建节点一般通过 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);

动态创建节点

• 为了避免一起获取同样的标签的时候，需要写很多对应的属性的设置，我们最好把这些属性设置抽取成一个类用来表示这些属性，这就是类的抽取

动态创建节点方式实现九宫格

发布微博实现代码

通过类名获取标签2.0