JS-web-API

JS基础知识：ECMA 262标准
JS-Web-API:W3C标准

JS内置的全局函数和对象有哪些？

1  Object   Array  Boolean  String  Math  JSON
2  window  document

常说的JS(浏览器执行的JS)包括两部分：

1 JS基础知识（ECMA262标准）
2 JS-Web-API （W3C标准）

DOM的本质

Document
Object
Model


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

获取DOM节点

var  div1 = document.getElementById("div1")  //元素
var  divList = document.getElementsByTagName("div") //集合
console.log(divList.length)
console.log(divList[0])


var  containerList = document.getElementsByClassName(".container")
var pList = document.querySelectorAll("p")  //集合

property

var  pList = document.querySelectorAll("p")
var p = pList[0]
console.log(p,style.width)  //获取样式
p,style.width = "100px"  //修改样式
console.log(p.className)  //获取class
p.className = "p1"  //修改class

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

Attribute

var  pList =  document.querySelectorAll("p")
var p = pList[0]
p,getAttribute('data-name')
p.setAttribute('data-name','imooc')
p.getAttribute(' style')
p.setAttribute('style','font-size:30px')

DOM结构操作

1 新增节点
2 获取父元素
3 获取子元素
4 删除节点

新增节点

var  div1 = document.getElementById("div1")

//添加新节点
var  p1 = document.createElement("p")
p1.innerHTML = "this is p1"

div1.appendChild(p1)  //添加新创建的元素
//移除已有节点
var  p2 = document.getElementById("p2")
div1.appendChild(p2)

获取父元素和子元素

var  div1 = document.getElementById("div1")
var   parent = div1.parentElement

var  child  =  div1.childNodes
div1.removeChild(child[0])

DOM是哪中基本的数据类型

树

DOM操作的常用API有哪些

1 获取DOM节点，以及节点的property和Attribute
2 获取父节点，获取子节点
3 新增节点，删除节点

DOM节点的Attribute和property有何区别？

1 property  只是一个JS对象的属性的修改
2 Attribute 是对HTML表亲啊属性的修改

BOM操作

Browser  Object   Model