JS基础知识(六)DOM,BOM
内置函数:
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节点
[code] 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
[code] //property console.log(div1.className) div1.className = 'abc' console.log(div1.className)
JS标准对象的属性
(3)Attribute
[code] //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结构操作
[code] <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)新增节点
[code] //添加 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)获取父元素获取子元素
[code] //父子 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)删除节点
[code] //删除 var childNodes = div1.childNodes div1.removeChild(childNodes[1])
2.BOM操作:
BOM是Browser object model的缩写
题目:
- 如何检测浏览器的类型
- 拆解url的各部分
知识点:
- Navigator
[code]var ua = navigator.userAgent Var isChrome = ua.indexof(‘Chrome’) console.log(isChrome)
- Screen
[code]Screen.width Screen.height
-
Location
Portocol 协议
host.域名、path路径
search 参数Hash #
- History
back后退
forward前进
go 去具体的
[code]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 #
1fff8
- C#-WebForm-JS知识:基础部分、BOM部分、DOM部分、JS事件
- JS基础知识(dom,bom操作)
- Html+JS+HTMLdom+Json+JQuery 常用基础知识点汇总
- 4 HTML&JS等前端知识系列之Dom的基础
- JavaScript——你理解的js基础是啥(JavaScript(核心、BOM、DOM))
- JS 面试知识学习历程(第六天) -- DOM操作和BOM操作
- JS之DOM基础知识总结
- js基础学习第二天(关于DOM和BOM)二
- JS基础知识之:DOM学习
- JS中BOM部分基础知识总结
- js基础学习第一天(关于DOM和BOM)一
- js-DOM基础知识一
- js基础学习第一天(关于DOM和BOM)一
- JS中BOM对象常用基础知识
- JS基础内容小结(DOM&&BOM)(二)
- js Dom 基础知识
- js基础学习之--BOM基础知识总结
- js基础学习第一天(关于DOM和BOM)一
- webBasic_javaScript_day03_定时器_BOM_DOM基础知识
- Javascript基础知识(三)BOM,DOM总结