BOM基础加强

1、浏览器对象BOM
DOM Window
DOM Navigator
DOM Screen
DOM History
DOM Location

2、浏览器对象的使用
History
History 对象包含用户（在浏览器窗口中）访问过的 URL
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
练返回按钮制作

Location
Location 对象包含有关当前 URL 的信息
通过href属性完成超链接效果
练超链接按钮效果

3、Window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()显示可提示用户输入的对话框。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
close()关闭浏览器窗口。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的 timeout。
alert()显示带有一段消息和一个确认按钮的警告框

4、与对话框有关的方法
window.alert(String)
Boolean window.confirm(String)
String window.prompt(String)

5、setInterval和setTimeout
setInterval(code,millisec[,"lang"])
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout() 只执行 code 一次。如果要多次调用，可以让 code 自身再次调用 setTimeout()

DOM基础加强

1、DOM文档对象模型
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用。
模型：所有的标记型文档都具有一些共性特征的一个体现。
用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性）都封装成对象。
封装成对象的目的是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。
标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档包括：HTML XML。
DOM要操作标记型文档必须先进行解析

2、DOM结构模型

3、DOM三个级别和DHTML介绍
(1)DOM模型有三种：
DOM level 1：将html文档封装成对象。
DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
DOM level 3：支持xml1.0的一些新特性。

(2)DHTML
动态的HTML，它不是一门语言，是多项技术综合体的简称。
包括html，css，dom，javascript。

(3)这四种语言的职责：
Html：负责提供标签，封装数据，这样便于操作数据。
Css：负责提供样式，对标签中的数据进行样式定义。
Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

4、BOM和HTML DOM关系图

5、NODE接口的特性和方法

6、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象

常用属性
all[] 提供对文档中所有 HTML 元素的访问 FF不支持
forms[]返回对文档中所有 Form 对象引用
body 提供对 <body> 元素的直接访问

常用方法
getElementById()返回对拥有指定 id 的第一个对象的引用
getElementsByName()返回带有指定名称的对象集合
getElementsByTagName()返回带有指定标签名的对象集合
write()向文档写 HTML 表达式 或 JavaScript 代码

7、Element对象
操纵 Element 对象的属性
获取属性：getAttitude(name)方法。
设置属性：setAttribute(name,value)方法。
删除属性：removeAttribute(name)方法。
在 Element 对象中查找 Element 对象
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合

8、Node常用属性
nodeName
如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，nodeName返回一个内容为#text 的字符串

nodeType
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点

nodeValue
如果给定节点是一个属性节点，返回值是这个属性的值
如果给定节点是一个文本节点，返回值是这个文本节点内容
如果给定节点是一个元素节点，返回值是 null

9、父节点、子节点和同辈节点
父节点： parentNode
parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。

子节点
childNodes：获取指定节点的所有子节点集合。
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。

同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

10、节点属性
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。

11、检查子节点和属性
查看是否存在子节点： hasChildNodes()
查看是否存在属性：hasAttributes()
即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。
当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。
在IE浏览器中，不存在hasAttributes()方法！

12、操作DOM节点树
插入节点
appendChild()方法
insertBefore(newNode,oldNode)方法
没有insertAfter()方法
删除节点：removeChild()方法
替换节点：replaceChild(newNode,oldNode)方法

13、移动节点
复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点。
移动节点：由以下三种方法组合完成

查找节点
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点。

插入节点
appendChild()方法
insertBefore()方法

替换节点：replaceChild()方法

14、innerHTML属性
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
innerHTML 属性多与div或span标签配合使用。

二、JavaScript基础（2）的更多相关文章

  1. 使用jQuery快速高效制作网页交互特效第一章JavaScript基础

    JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...

  2. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  3. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  4. 2、JavaScript 基础二 （从零学习JavaScript）

     11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...

  5. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  6. JavaScript 基础学习（二）js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  7. JavaScript 基础 学习 （二）

    JavaScript 基础 学习 节点属性 ​ 每一个节点都有自己的特点 ​ 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) ​ 语法:节点.nodeT ...

  8. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  10. javascript 基础

    javascript概述: javascript历史: * 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEas ...

随机推荐

  1. 虚拟主机连接FTP发送"AUTH TLS"命令后提示“无法连接到服务器”

    https://help.aliyun.com/knowledge_detail/36417.html?spm=5176.11065259.1996646101.searchclickresult.7 ...

  2. 找回停掉docker的文件

    如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...

  3. Xcode No account for team "". Add a new account in the Accounts preference pane or verify that your accounts have valid credentials.

    问题背景 Xcode报错误信息:No account for team "QMP96B5DPW". Add a new account in the Accounts prefer ...

  4. C# 反射获取控件

    Control control = Controls.Find(]; //object o = control.GetType().GetProperty("PropertyName&quo ...

  5. MySQL主从复制作用和原理

    一.什么是主从复制?主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库:主数据库一般是准实时的业务数据库. 二.主从复制的作用1.做数据的热备,作为后备数据库,主数据库服务器故障后, ...

  6. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  7. git本地项目代码上传至码云远程仓库总结【转】

    转载自 :https://blog.csdn.net/fox9916/article/details/78253714 git基本使用小结 之前公司的版本控制工具一直用的是svn,最近要改用git,之 ...

  8. Guava Cache用法介绍<转>

    Guava Cache是在内存中缓存数据,相比较于数据库或redis存储,访问内存中的数据会更加高效.Guava官网介绍,下面的这几种情况可以考虑使用Guava Cache: 愿意消耗一些内存空间来提 ...

  9. 在Java路上，我看过的一些书、源码和框架(转)

    原文地址:http://www.jianshu.com/p/4a41ee88bd82 物有本末,事有终始,知所先后,则近道矣 面试经历 关于Java面试,你应该准备这些知识点关于Java面试,你应该准 ...

  10. JavaScript学习历程01

    水仙花数 ps:各位数字立方和等于该数本身 方法1 (数组) <script type="text/javascript"> var i = 100; var newi ...