JS-WEB-API(BOM、DOM)
js基础知识:基于ECMA 262标准(规定基础语法、规则)
--变量类型和计算
--原型和原型链
--闭包和作用域
--异步和单线程
--其他(如日期、Math、各种常用API)
特点:表面看来并不能用于工作中开发代码
内置函数:Object Array Boolean String...
内置对象:Math JSON...
js-web-API:基于W3C标准(在规则上怎么用)
w3c标准中关于JS的规定有:
--DOM操作(增删改查,修改网页的结构,页面的动态效果)
--BOM操作(获取浏览器特性、当前屏幕尺寸宽高、当前地址栏地址)
--事件绑定(click,keyon,mouseenter,mouseup等)
--ajax请求(包括http协议)
--存储
浏览器即要遵循浏览器对js的运行的定义,又要遵循ECMA262,又要遵循w3c标准。
1.页面弹框是 window.alert(123);,浏览器需要做:
--定义一个window全局变量,对象类型
--给它定义一个alert属性,属性值是一个函数
2.获取元素document.getElementById(id);浏览器需要:
--定义一个document全局变量,对象类型
--给它定义一个getElementById的属性,属性值是一个函数
3.W3C标准没有规定任何Js基础相关的东西
--不管什么变量类型、原型、作用域和异步(ECMA 262)
--只管定义用于浏览器中JS操作页面的API和全局变量
4.js内置的全局函数和对象有哪些:(可以拿来直接用的)
--之前讲过的 Object Array Boolean String Math JSON等
--刚刚提到的 window document
--未定义的全局变量,如:navigator.userAgent
5.常说的JS(浏览器执行的JS)包含两部分:
--JS基础知识(**ECMA262标准**)
--JS-Web-API(**W3C标准**)
/--------------DOM操作--------------
Document Object Model
1.DOM是哪种基本的数据结构?
--树
2.DOM操作的常用API有哪些?
--获取DOM节点,以及节点的property和Attribute
--获取父节点,获取子节点
--新增节点,删除节点
3.DOm节点的attr和property有何区别?
--property只是一个JS对象的属性的修改
--Attribute是对html标签属性的修改
1、DOM的本质
(浏览器把拿到的html代码,结构化成浏览器可识别、js可操作的一个模型而已)
--XML可扩展的描述语言,可以描述任何结构化的数据
树,有一个主干,有很多分支,分支在有分支;
<?xml version="1.0" encoding="UTF-8">
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><boby>Don't forget me this weekend!</body><other><a></a><b></b></other>
</note>--html是XML的一种特殊类型,是一种特殊结构,和XML一样的规则
<!DOCTYPE html>
<html>
<head><meta charset ="UTF-8"><title>Document</title>
</head>
<body><div><p>this is p!</p></div>
</body>
</html>
2、DOM节点操作
--获取DOM节点
var div1 = document.getElementById('div1');//元素var divList =document.getElementsByTagName('div'); //集合 console.log(divList.length);console.log(divList[0]);var containerList = document.getElementsByClassName('.container');//集合var pList = document.querySelectorAll('p');//集合--property(改的是js对象的一个标准属性)eg:1.var pList = document.querselectorAll('p');var p = pList[0];console.log(p.style.width); //获取样式p.style.width = '100px'; //修改样式console.log(p.className); //获取classp.className = 'p1'; //修改class//获取nodeName 和 nodeType console.log(p.nodeName);console.log(p.nodeType);eg:2. x是obj的一个propertyvar obj = {x:100,y:200};console.log(obj.x); // 100 nodeName是p的一个propertyvar p = document.getElementsByTagName('p')[0];console.log(p.nodeName); // P// propertyvar div = document.getElementById('div1');console.log(div1.className);div1.className = 'abc';console.log(div1.className);--Attribute(改的html代码文档里面的标签的属性)var pList = document.queryselectorAll('p');var p = pList[0];p.getAttribute('data-name');p.setAttribute('data-name','imocc');p.getAttribute('style');p.setAttribute('style','font-size:30px');
3、DOM结构操作(树结构)
--新增节点
var div1 = document.getElementById('div1');//添加新节点var p1= document.createElement('p');p1.innerHTML = 'this is p1';div1.appendChild(p1); //添加新创建的元素//移动已有的节点var p2 = document.getElementById('p2');div1.appendChild(p2);
--获取父元素
--获取子元素
--删除节点
var div1 = document.getElementById('div1');var parent = div1.parentElement;var child = div1.childNodes;console.log(child[0].nodeType); // text 3console.log(child[1].nodeType); // div 1 console.log(child[0].nodeName); // text #textconsole.log(child[1].nodeName; // div div div1.removeChild(child[1]);
/---------------BOM的操作--------------------
Browser Object Model 浏览器对象模型
1.如何检测浏览器的类型
2.拆解url的各部分
1.navigator
2.screen
3.location
4.history
eg:1、navigator & screen
//navigator var ua = navigator.userAgent; var isChrome = ua.indexOf('chrome'); console.log(isChrome); //screen console.log(screen.width); console.log(screen.height);
2.location & history
//location console.log(location.href); //获取页面的地址 location.href = 'http://imooc.com'; //修改页面的地址 console.log(location.protocol); //协议 'http:' 'https:' console.log(location.host); //域名 'www.baidu.com' console.log(location.pathname); //路径 '/learn/199.html' console.log(location.search); //url的?后面查询字符串、参数 ?cid=99&a=b console.log(location.hash); //url中#后面的参数 #mid=100//history history.back(); //返回 history.forward(); //前进后退
转载于:https://www.cnblogs.com/licong654c/p/7544196.html
JS-WEB-API(BOM、DOM)相关推荐
- web前端之js快速入门(BOM和DOM)
BOM:browser object module 浏览器对象模型 BOM 主要处理浏览器窗口和框架 . window对象 open.close 打开(关闭)新的页面,窗口 <script t ...
- 论 js中:(class、id)出乎意料的优先级?- 案例篇
文章目录 论 js中:(class.id)出乎意料的优先级?- 案例篇 看图说明 · 案例场景: 重要代码 · 解析 · `提示`: `class / id` 在`js`中抓取的`优先级`:`[代码点 ...
- jquery、js去除浏览器(ff、ie)缓存问题
jquery.js去除浏览器(ff.ie)缓存问题 js a='mypic.gif'; $("#lookpic").html("<img src='"+a ...
- 【JAVA基础】重新系统学习Java(七)常用API(String、ArrayList)
目录 常用API(String.ArrayList) String String类概述 创建字符串对象的2种方式 String类常见面试题 String类常用API-字符串内容比较 String类常用 ...
- html中的bom和dom,Javascript基础五(BOM和DOM)
1.BOM概念 什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM由一系列 ...
- JavaScript 网页编程(三)——Web API(BOM)
一.BOM 简介 BOM(Browser Object Model)浏览器对象模型:提供与浏览器窗口进行交互的对象 JavaScript 语法标准化是 ECMA,DOM 标准化是 W3C BOM 是 ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- Python面试题大全(三):Web开发(Flask、爬虫)
目录 Web Flask 140.对Flask蓝图(Blueprint)的理解? 141.Flask 和 Django 路由映射的区别? Django 142.什么是wsgi,uwsgi,uWSGI? ...
- 7.Java常用API(String、ArrayList)
API(Application Programming Interface, 应用程序编程接口) Java写好的技术(功能代码),可以直接调用 1.String String类定义的变量可以用于存储字 ...
- 「ECharts」交互 API (echarts、echartsInstance)
交互 API > 全局 echarts 对象 全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的. > echartsInstance 对象 echartsI ...
最新文章
- java中io流实现哪个接口_第55节:Java当中的IO流-时间api(下)-上
- 解决layui前端动态设置radio、checkbox默认选项的解决方案
- FreeBSD下安装配置Hadoop集群(性能调优)
- SQL-92标准 中文翻译——定义、记号和约定 (定义)
- swift5.x基础知识入门
- php sequelize,node,express_sequelize 联合查询,node,express,mysql,sequelize - phpStudy
- 漫画:云市场下,运营商甲方爸爸也出来抢乙方生意了?
- 【JVM调优系列】----CPU过高的分析与解决方案
- 【java】Java实现单向链表反转
- jinja Import
- [译]A Simple CSS Animation Tutorial
- Android 进行单元測试难在哪-part3
- 惊恐,AI黑洞:基于 AI 篡改的网络攻击来了
- foxmail本地文件夹同步服务器,foxmail同步QQ邮箱里的所有文件夹
- Centos8.3安装教程
- 机器人心灵感应:允许人类远程操作和训练机器人手
- python生成验证码的程序_用python生成验证码图片
- 《Visual Basic.Net 循序渐进》问题收集贴
- 无线路由器连接交换机
- TestProject 自动化