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标准对象的属性 

JS基础知识(六)DOM,BOM_第1张图片

(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'))

JS基础知识(六)DOM,BOM_第2张图片

文档内的标签的属性

3.DOM结构操作

	

this is p1

this is p2

this is p3

this is p4

    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 #

 

 

你可能感兴趣的:(JavaScript)