前端JavaScript面试技巧笔记（7）

知识点

    #常说的JS(浏览器执行的JS)分为两部分

JS基础知识（ECMA262标准）
JS-WEB-API(W3C标准)

    #DOM

DOM-Document Object model

    #DOM的本质

是将字符串的html代码结构化为JS可识别可操作的内容，即JS对象；

所以在获取节点之后，可以用属性的方式得到或修改内容，如
var p = document.getElementById('div1');
console.log(p.style.width);
p.className = 'class1';

    #DOM节点操作

节点获取方式：
var div1 = document.getElementById('div1');//通过ID获取
var div2 = document.getElementsByTagName('div')//通过tagname获取，中间有s
var div3 = document.getElementsByClassName('class')//通过类名获取，中间有s
var div4 = document.querySelectorAll('p');//括号内放选择器，返回指定选择器的所有结果
var div5 = document.querySelector('.class');//括号内放选择器，返回指定选择器所有结果的第一个

div2-div4获取的是集合，另外两个获取的是单个；
集合可以这样操作；
console.log(div2.length);
console.log(div2[0]);

    #property和attribute的区别

attribute操作的是html标签内的属性；
而property操作的是JS对象的属性；
如：
var p = document.getElementById('div1');
p.style.width = '100px'; //property

html代码中
<div date-name = "lalala" style = "width:100px;"></div>
<--这里的date-name和style是attribute-->
操作attribute属性要用到getAttribute和setattribute
如：
console.log(p.getAttribute('data-name'));
p.setAttribute('data-name','olaolaola');

    #DOM结构操作

新增节点
var div = document.getElementById('div1');
var p = document.createElement('p');
p.innerHTML = 'this is p1';
div.appendChild(p);

移动节点
var p2 = document.getElementById('div2');
div.appendChild(p2);//将p2从原有位置移动到div内

获取父元素
var parent = div.parentElement;

获取子元素
var child = div.childeNodes;//集合
//在获取子元素时可能会得到由空格或者字符组成的text元素，可以child[i].nodeName或.nodeType来过滤

删除节点
div.removeChild(child[0]);