JS基础知识(六)DOM，BOM

内置函数：

      Object,Array,Boolean,String...

内置对象:

      Math JSON..

——

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

W3C标准中关于JS的规定有：

1. DOM操作
2. BOM操作
3. 事件绑定
4. AJAX请求（包括http协议）

5. 存储

 举例子：

1. 页面弹窗window.alert(123),浏览器需要做：定义一个window全局变量，对象类型，再给它定义一个alert属性，属性值是一个函数
2. 获取元素document.getElementById(id),浏览器需要：定义一个document全局变量，对象类型，再给它定义一个getElementById的属性，属性值是一个函数。
   
   但是W3C标准没有规定任何JS基础相关的东西。不管什么变量类型，原型，作用域和异步。只管定义用于浏览器中JS操作页面的API和全局变量。

总结：

常说的JS（浏览器执行的JS）包含两部分：

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

————————————————————————————————————————————————————-

DOM操作
   题目：

1. DOM是哪种基本的数据结构？
2. DOM操作的常用API有哪些？
3. DOM节点的attr和property有何区别？

知识点：

1.DOM的本质

   Xml可扩展的描述语言，可以描述任何结构化的数据，是一个树的数据结构。而HTML 是XML的特殊类型。

   html代码就是一个字符串，可以结构化一个数据结构。

   DOM就是将html进行了一个结构化，变成了浏览器和可识别并且js可操作的一个模型而已。

2.DOM节点操作

（1）获取DOM节点

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

		var pList = document.querySelectorAll('p')
		console.log(pList)

dom获取的是JS对象 属性可扩展.

（2）Prototype
 

		//property
		console.log(div1.className)
		div1.className = 'abc'
		console.log(div1.className)

JS标准对象的属性 

（3）Attribute

	//attribute
		var p1 = document.getElementById('p1')
		console.log(p1.getAttribute('data-name'))
		p1.setAttribute('data-name','xyz')
		console.log(p1.getAttribute('data-name'))

 

文档内的标签的属性

3.DOM结构操作

	<div id="div1">
		<p id="p1">this is p1</p>
		<p id="p2">this is p2</p>
	</div>
	<div id="div2">
		<p id="p3" >this is p3</p>
		<p id="p4">this is p4</p>
	</div>

    DOM是一个树 简称一个DOM树结构
（1）新增节点

		//添加
		var p = document.createElement('p')
		p.innerHTML = 'new p'
		var div1 = document.getElementById('div1')
		div1.appendChild(p)

		//改变
		var p4 = document.getElementById('p4')
		var div1 = document.getElementById('div1')
		div1.appendChild(p4)

 

（2）获取父元素获取子元素

		//父子
		console.log(p4.parentElement)
		console.log(div1.parentElement)

		console.log(div1.childNodes)

		//
		console.log(div1.childNodes[0].nodeType) //text 3
		console.log(div1.childNodes[1].nodeType) //p 1
		//标签都是1
		//空字符可以通过nodeType过滤掉
		console.log(div1.childNodes[0].nodeName) //text #text
		console.log(div1.childNodes[1].nodeName) //p P

（3）删除节点

		//删除
		var childNodes = div1.childNodes
		div1.removeChild(childNodes[1])

2.BOM操作：

BOM是Browser object model的缩写

题目：

1. 如何检测浏览器的类型
2. 拆解url的各部分

知识点：

1. Navigator

   var ua = navigator.userAgent
   Var isChrome = ua.indexof(‘Chrome’)
   console.log(isChrome)

2. Screen
    

   Screen.width
   Screen.height

3. Location

   Portocol 协议
   host.域名、

   path路径
   search 参数

   Hash #

4. History
   
   back后退
   forward前进
   go 去具体的
    

   console.log(navigator.userAgent)
   VM151:1 Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
   
   console.log(navigator.userAgent)
   VM156:1 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
   
   location.protocol
   "https:"
   location.host
   "coding.m.imooc.com"
   location.pathname
   "/classindex.html"
   location.search
   "?cid=99"
   location.hash
   "#mid=100"
   location.href
   "https://coding.m.imooc.com/classindex.html?cid=99#mid=100"
   

 

解答：
1.DOM是哪种基本的数据结构？
  树
2.DOM操作的常用API有哪些
  获取DOM节点，以及节点的property和attribute
  获取父节点，获得子节点
  新增节点，删除节点
3.DOM节点的attr和property有何区别
  property只是一个JS对象的属性的修改
  Attribute是对html标签属性的修改

1.如何检测浏览器的类型
  var ua = navigator.userAgent
  var isChrome = ua.indexof(‘Chrome’)
  console.log(isChrome)
2.拆解url的各部分
  location.
    Portocol 协议
    host.域名、
    path路径
    search 参数
    Hash #