一· JavaScript组成
JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。
组成部分:
1、核心( ECMAScript)：JavaScript语言的核心，包含基本语法、数据类型、关键字…
2、文档对象模型( DOM)：提供访问和操作网页内容的方法和接口；可操作HTML中的标签内容、样式、结构；document.write(“你好”)，输出内容至网页，这就是DOM中方法。
3、浏览器对象模型( BOM)：提供与浏览器交互的方法和接口。可操作浏览器窗口，比如浏览器地址栏，浏览器访问历史等；window.alert(“你好”);，浏览器弹出一个消息对话框，这就是BOM中的方法。
二. DOM和BOM简介对比
DOM:文档对象模型,主要是操作是HTML中标签；
BOM:浏览器对象模型,主要是操作的浏览器窗口；
DOM(Document Object Model)即文档对象模型使JavaScript有能力与HTML 文档的所有元素“对话”。
BOM(Browser Object Model)即浏览器对象模型使 JavaScript 有能力与浏览器“对话”。
BOM提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。
BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。
BOM与DOM关系非常密切。BOM的window对象中包含一个document属性，该属性是对DOM模型的document对象的引用，代表了当前窗口中网页文档所对应的document对象，通过该属性可以访问网页文档的各种内容。
DOM
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。可以通过DOM接口改变网页的内容、结构和样式。
Dom树状图
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素:页面中的所有的标签都是元素，DOm中使用element表示
- 节点:网页中所有的元素都是节点，DOM中使用node表示
获取元素
DOM提供的API：
- getElementById()：参数为字符串，需要加引号，找不到元素则返回null
- getElementsByTagName()
- getElementsByClassName()
H5提供的新方法：
- querySelector()
- querySelectorAll()
根据元素的id获取
- 1.使用getelementById（）进行获取元素对象
基本语法为：
<body>
<div id="time"></div>
<script>
// 1.get获取 element元素 by通过 驼峰命名法
//2参数id是大小写敏感的字符串
//3返回元素是一个对象objcet
var timer=document.getElementById('time')
console.log(timer);
</script>
</body>
- 2.根据标签的名获取
使用getelementsByTagName（）方法可以返回带有指定标签的对象集合
<body>
<ol>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
</ol>
<script>
//1返回的是获取过来的元素对象的集合，以伪数组的形式存储的，如果页面中没有对应的元素直接返回[]空的伪数组
var listEBT=document.getElementsByTagName('li')
console.log(listEBT);
</script>
</body>
-
3.通过html5新增的方法获取
- 3.1getElementsByClassName根据类名获得某些元素的集合
在这里插入代码片<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
</body>
<script>
//1getElementsByClassName根据类名获得某些元素的集合
var getBox=document.getElementsByClassName('box')
console.log('getBox');
</script>
- 3.2document.querySelector(‘选择器’)根据指定选择器返回第一个元素对象
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<li>首页</li>
<li>我的</li>
</div>
</body>
<script>
//querySelector返回指定选择器的第一个元素对象切记里面的选择器需要加符号.box,#nav
var boxs= document.querySelector('.box')
console.log(boxs);
</script>
- 3.3querySelectorAll()返回指定选择器的所有元素的集合
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<li>首页</li>
<li>我的</li>
</div>
</body>
<script>
//querySelectorAll()返回指定选择器的所有元素的集合
var listBox =document.querySelectorAll('.box')
console.log(listBox);
</script>
- 4.获取body元素
<body>
<script>
//获取body元素
var bodyEle=document.body;
console.log(bodyEle);
</script>
</body>
- 5获取html元素
<script>
//获取body元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
属性操作
1.获取属性
1.获取内置属性：ele.Attr
2.获取自定义属性（标准）：ele.getAttribute(‘Attr’)
2.设置属性
2.1.ele.Attr = 'value’
2.2.ele.setAttribute(‘Attr’, ‘value’)
2.3.需要注意的是修改类名的时候，两种方法对类名属性要求不同：
- 1.ele.className = 'newCLassName’
- 2.ele.setAttribute(‘class’, ‘newClassName’)
这是由于在js中，class为保留字
3.移除属性
3.1ele.removeAttribute(‘Attr’)
4.获取自定义属性
4.1.ele.getAttribute(‘data-attr’)：兼容性好
4.2.ele.dataset.attr 或 ele.dataset[‘attr’]
- 1.dataset 是一个对象， 存放所有以data开头的自定义属性
- 2.dataset只能获取“data-”开头的属性
- 3.如果自定义属性中有多个链接的单词，JS中采用驼峰命名法
2606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
