前端JS基础六（DOM）

前面我写了JS基础知识，接下来要开始写JS-WEB-API

• JS基础知识：ECMA 262标准
• JS-WEB-API：W3C标准，它参与规定任何JS基础相关的东西，不管什么变量类型、原型、作用域和异步，只管定义用于浏览器JS操作页面的API和全局变量

DOM

DOM 本质：DOM 可以理解为，浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作性的一个模型而已

1.获取DOM节点 
  var div1=document.getElementById(‘div1’)；//元素 
  var divList=document.getElementsByTagName(‘div’); //集合 
  console.log(divList.length) 
  console.log(divList[0])

  var containerList=document.getElementsByClassName(“.contaner”)//集合 
  var pList=document.querySelectorAll(‘p’)//集合 

2.property 
  var pList=document.querySelectorAll(‘all’); 
  var p=pList[0]; 
  console.log(p.style.width) 
  p.style.width=’100px’ 
  console.log(p.className) 
  p.className=’p1’

  //获取nodeName和nodeType 
  console.log(p.nodeName) 
  console.log(p.nodeType)

• property只是一个JS对象的属性的修改
• Attribute是对html标签属性的修改

DOM节点操作

• 新增节点

  var div1 = document.getElementById('div1');
  //添加新节点
  var p1 = document.createElement('p');
  p1.innerHTML = 'this is p1';
  div1.appendChlid(p1); //添加新创建的元素
  //移动已有节点
  var p2 = document.getElementById('p2');
  div1.appendChild(p2);

  //返回div1孩子节点类型 1代表DOM类型
  console.log(div1.childNodes[0].nodeType) //1
  console.log(div1.childNodes[0].nodeName) //p

• 查询父节点

  var div1 = document.getElementById('div1');
  var parent = div1.parentElement;

• 查询子节点
• 删除节点

  var child = div1.childNodes; //查询子节点
  div1.removeChild(child[0]); //删除节点

练习题

练习题1、dom是哪种基本的数据结构？ 
  树 

练习题2、Dom操作的常用API有哪些？ 
  获取DOM节点，以及节点的property和Attribute 
  获取父节点，获取子节点  childNodes/ parentNode
  新增节点，删除节点 

练习题3、Dom节点的Attribute和Property有和区别？ 
  property只是一个JS对象的属性的修改 
  Attribute是对html标签属性的修改