JS-WEB-API（BOM、DOM）

最新推荐文章于 2024-07-14 18:05:06 发布

weixin_30291791

最新推荐文章于 2024-07-14 18:05:06 发布

阅读量134

点赞数

文章标签： json 数据结构与算法

原文链接：http://www.cnblogs.com/licong654c/p/7544196.html

版权

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); //获取class
    p.className = 'p1'; //修改class
    
    //获取nodeName 和 nodeType
    console.log(p.nodeName);
    console.log(p.nodeType);
    
    eg:2. 
    x是obj的一个property
    var obj = {x:100,y:200};
    console.log(obj.x); // 100
    
    nodeName是p的一个property
    var p = document.getElementsByTagName('p')[0];
    console.log(p.nodeName); // P
    
    // property
    var 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 3
    console.log(child[1].nodeType); // div 1
   
    console.log(child[0].nodeName); // text #text
    console.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

weixin_30291791

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-WEB-API（BOM、DOM）

js基础知识：基于ECMA 262标准（规定基础语法、规则）--变量类型和计算--原型和原型链--闭包和作用域--异步和单线程--其他（如日期、Math、各种常用API）特点：表面看来并不能用于工作中开发代码内置函数：Object Array Boolean String...内置对象：Math JSON...js-web-API：基于W3C标准（在规则上怎么用...
复制链接

扫一扫