内置函数:
Object,Array,Boolean,String...
内置对象:
Math JSON..
——
JS基础知识:基于ECMA 262标准
JS-Web-API: W3C标准W3C标准中关于JS的规定有:
- DOM操作
- BOM操作
- 事件绑定
- AJAX请求(包括http协议)
存储
举例子:
- 页面弹窗window.alert(123),浏览器需要做:定义一个window全局变量,对象类型,再给它定义一个alert属性,属性值是一个函数
- 获取元素document.getElementById(id),浏览器需要:定义一个document全局变量,对象类型,再给它定义一个getElementById的属性,属性值是一个函数。
但是W3C标准没有规定任何JS基础相关的东西。不管什么变量类型,原型,作用域和异步。只管定义用于浏览器中JS操作页面的API和全局变量。
总结:
常说的JS(浏览器执行的JS)包含两部分:
- JS基础知识(ECMA262标准)
- JS-WEB-API(W3C标准)
————————————————————————————————————————————————————-
DOM操作
题目:
- DOM是哪种基本的数据结构?
- DOM操作的常用API有哪些?
- 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的缩写
题目:
- 如何检测浏览器的类型
- 拆解url的各部分
知识点:
- Navigator
var ua = navigator.userAgent Var isChrome = ua.indexof(‘Chrome’) console.log(isChrome)
- Screen
Screen.width Screen.height
-
Location
Portocol 协议
host.域名、path路径
search 参数Hash #
- 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 #