core dom的操作

1.查看节点

访问指定节点的方法

getElementById()

getElementByName()

getElementByTagName()

节点的类型

元素节点

属性节点

文本节点

 var _box = document.getElementById("box");

    var _boss = document.getElementById("boss");

    console.log(_boss); 

    // 元素节点

    console.log(_box.nodeName);

    console.log(_box.nodeType);

    console.log(_box.nodeValue);

    // 属性节点

    var attr = _box.getAttributeNode("id");

    console.log(attr.nodeName);

    console.log(attr.nodeType);

    console.log(attr.nodeValue);

    // 文本节点

    var chil = _box.firstChild;

    console.log(chil.nodeName);

    console.log(chil.nodeType);

    console.log(chil.nodeValue);

 

 

这两个获取值是一样的

父节点找子节点 

可能会有文本节点就像ul下方的li 会有空格  默认就是文本节点 

 

不判断筛选

就是在前面再加一个Element 得到的就是元素节点 

 

兄弟直接的查找

var _list = document.getElementById("list");

    console.log(_list.nextElementSibling);  

    console.log(_list.previousElementSibling);

2.删除和添加节点

查看属性节点:getAttribute（"属性名"）；

修改属性节点：setAttribute（“属性名”，“属性值”）

删除属性节点：removerAttribute（“属性名”）

 var _box = document.getElementById("box");

    var _boss = document.getElementById("boss");

  _boss.getAttribute("id");

    _boss.setAttribute("title", "100");

    _boss.removeAttribute("class");

 3.创建与添加元素对象

createElement():创建元素节点；

appendChild（）：末尾追加方式插入节点

var _p = document.createElement("p");

    document.body.appendChild(_p); 这里就是直接添加到body里面