博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS进阶 - JS 、JS-Web-API与DOM、BOM
阅读量:7231 次
发布时间:2019-06-29

本文共 2561 字,大约阅读时间需要 8 分钟。

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()//前进

转载地址:http://zycfm.baihongyu.com/

你可能感兴趣的文章
我的友情链接
查看>>
我的友情链接
查看>>
mariadb安装
查看>>
vue+vuex+axios+echarts画一个动态更新的中国地图
查看>>
5.8 volumetric post-processing--game programming gems5 笔记
查看>>
8086的地址空间
查看>>
Android开发动画效果被遮掉的解决方法
查看>>
Apache2.2.17源码编译安装以及配置虚拟主机
查看>>
2017年开发语言排名
查看>>
读二进制表的显示 Binary Watch
查看>>
我的友情链接
查看>>
linux基础:10、基础命令(4)
查看>>
linux中强大的screen命令
查看>>
放开那个程序员
查看>>
构建高性能数据库缓存之Redis(一)
查看>>
测试驱动开发
查看>>
解决MySQL不允许从远程访问
查看>>
puppet介绍及基于httpd实例部署
查看>>
UML常用工具之三--RSA
查看>>
iis7 appcmd的基础命令及简单用法
查看>>