JS进阶 - JS 、JS-Web-API与DOM、BOM

Developer 发布于2019-08-22 17:23 / 818人阅读

摘要：与常说的浏览器执行的有两部分基础语法标准规定基础语法，包括类型变量原型作用域异步标准定义用于浏览器中操作页面的和全局变量，规定浏览器让开发者做的事情，没有规定相关基础语法浏览器运行既要遵循标准又要遵循标准知识补充内置全局函数和对象全

1.JS 与 JS-Web-API

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

(1) JS基础语法：ECMA 262 标准（规定基础语法，包括类型变量、原型、作用域、异步）
(2) JS-Web-API：W3C 标准 （定义用于浏览器中JS操作页面的API和全局变量，规定浏览器让开发者做的事情， W3C 没有规定JS相关基础语法）

浏览器运行JS既要遵循 ECMA 262 标准 又要遵循 W3C 标准

知识补充：

JS内置全局函数和对象：
全局对象：window，document等 
全局变量：所有未定义可以直接用的全局变量，例：navigator（var ua = navigator.userAgent 获取浏览器特性）

2.DOM（文档对象模型 Document Object Model）

XML：可扩展的描述语言，描述结构化数据（标签名自定义，数据结构是树）
HTML：XML的特殊类型（HTML代码就是一个字符串）

DOM的基本数据结构：树
DOM的本质：浏览器把拿到的HTML代码结构化成浏览器可识别，JS可识别可操作的模型

DOM节点操作：

(1) 获取DOM节点:

    var div1 = document.getElementById("div1") //获得元素
    var divList = document.getElementsByTagName("div") //获得集合（JS对象）
    console.log(divList[0])
    var containerList = document.getElementByClassName(".container") //获取集合
    var pList = document.querySelectorAll("p") // 获取集合

(2) prototype JS对象属性获取与修改:

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

(3）Attribute HTML文档标签属性获取与修改:

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

DOM结构操作：

(1) 新增节点:

    var div1 = document.getElementById("div1")
    
    方法1 - 添加新节点：
    var p1 = document.creatElement("p")
    p1.innerHTML = "this is p1"
    div1.appendChild(p1) //添加新创建的元素
    
    方法2 - 移动已有节点（原先位置不再存在该节点）：
    var p2 = document.getElementById("p2")
    div1.appendChild(p2)
    
(2) 获取父元素：
 
    var div1 = document.getElementById("div1")
    var parent = div1.parentElement //元素
    
(3) 获取子元素节点：
 
    var div1 = document.getElementById("div1")
    var child = div1.childNodes //获取集合（childNodes包括空文本 text）
    console.log(div1.childNodes[1].nodeName) // #P
    console.log(div1.childNodes[1].nodeType) // 1 (一般类型为1，text为3)
    
(4) 删除节点
    var div1 = document.getElementById("div1")
    var child = div1.childNodes
    div1.removeChild(child[0])

3.BOM（浏览器对象模型 Browser Object Model）

1.检测浏览器类型：

var ua = navigator.userAgent //获取浏览器类型
var isChrome = ua.indexOf("Chrome")
console.log(isChrome)

2.解析url的各部分

location:

console.log(location.href) //整个路径(location.href = ""  //改变路径地址,在控制台直接改写可以直接访问该网址)
console.log(location.host) //:主机名
console.log(location.protocol) //协议http: , https:
console.log(location.pathname) //路径"/learn/199"
console.log(location.search) // ？之后的参数（多个参数&相连）
console.log(location.hash) // #哈希值

知识补充：

screen 屏幕：
console.log(screen.width)
console.log(screen.height)

history 历史：
history.back()//返回
history.forward()//前进

私有云专线服务 js进阶视频教程 js dom监听 js dom交换 js dom样式修改

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95128.html

【JS基础】DOM，BOM，事件绑定，ajax，跨域，存储

摘要：常说的浏览器执行的包含两部分基础知识标准标准的内容包括事件绑定请求包括协议存储标准没有规定任何基础相关的东西。如果未经允许即可获取，那是浏览器同源策略出现了漏洞。常说的JS（浏览器执行的JS）包含两部分 JS基础知识（ECMA 262 标准） JS-Web-API（W3C 标准） JS-Web-API的内容包括 DOMBOM事件绑定ajax请求（包括http协议）存储 W3C 标...

zero 2019-08-23 14:10 评论0 收藏0
前端面试之路二(javaScript基础整理)

摘要：在标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。这个节点包括很多，比如，以及一些方法等方法。一个对象有很多，该集合名字为，里面有其他以及，里面有很多。一、变量类型和计算 JS中使用typeof能得到哪些类型变量类型值类型：变量本身就是含有赋予给它的数值的，它的变量本身及保存的数据都存储在栈的内存块当中引用类型：引用类型当然是分配到...

AbnerMing 2019-08-23 10:43 评论0 收藏0
慕课网js面试题学习笔记(ES6 标准) ——实时更新

摘要：而第一种方法只能判断引用类型，不能判断值类型，因为值类型没有对应的构造函数描述一个对象的过程生成一个新的空对象指向这个新对象执行构造函数中的代码，即对赋值将新对象的属性指向构造函数的属性返回，即得到新对象。最近在在看前端面试教程，这篇文章里大部分是看视频的过程中自己遇到的不清楚的知识点，内容很简单，只是起到一个梳理作用。有些地方也根据自己的理解在作者的基础上加了点东西，如有错误，欢迎...

netmou 2019-08-20 18:10 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0