day52---前端之JavaScript三

1. 介绍

  • 描述：JavaScript分为 ECMAScript，DOM，BOM

  • BOM(Browser Object Model)：是指浏览器窗口对象模型，顶级对象是window

  • DOM(Document Object Model)：是指文档对象模型，并非一个对象

  • 说明：window、document都是一个实例对象，他们都属于Object，表示浏览器中打开的窗口。Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用

2. BOM对象

window对象

  • 说明：所有浏览器都支持window对象

  • 功能上讲：一个html文档就是一个window对象

  • 功能上讲：控制浏览器窗口

  • 使用上讲：window对象不需要实例化或创建对象，可以直接使用

  • 方法上讲：window的方法在调用时不需要写window，直接写方法名即可

  • window对象的方法：

    • alert()：显示带有一段消息和一个确认按钮的警告框(弹出指定的信息)
    • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框(弹出指定的信息以及确定和取消按钮，点击确定返回true，点击取消返回false)
    • prompt()：显示可提示用户输入的对话框(弹出指定的信息和输入框，第一个参数是指定的信息，第二个参数是输入框中默认的内容)
    • open()：打开一个新的浏览器窗口或查找一个已命名的窗口(指定打开的url地址，不填写url打开一个新窗口的空白页)
    • close()：关闭浏览器窗口(关闭当前浏览器的当前窗口，不用传递参数)
    • setInterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式，返回ID值
    • clearInterval()：取消由setInterval()设置的timeout(循环不停的调用函数，直到遇到clearInterval()被调用或窗口被关闭；setInterval()返回的ID值可以当作clearInterval()的参数传入)
    • setTimeout()：在指定的毫秒数后调用函数或计算表达式
    • clearTimeout()：取消由setTimeout()方法设置的 timeout
    • scrollTo()：把内容滚动到指定的坐标

window子对象

    • 描述：获取浏览器信息对象
    • 常用方法：

  • screen对象：

    • 描述：获取屏幕信息对象

  • history对象：

    • 描述：浏览历史对象
    • 常用属性和方法：
      • history.length：浏览器历史列表中的URL数量
      • history.forward()：前进一页
      • history.back()：后退一页
      • history.go(n)：前进n页

  • location对象：

    • 描述：页面URL操作对象
    • 常用方法：
      • location.href：获取当前页面的URL地址
      • location.href="URL"：跳转到指定页面
      • location.reload()：重新加载当前页面

3. DOM对象

DOM介绍

  • 描述：DOM(Document Object Model)是W3C(万维网联盟)标准。DOM定义了访问HTML和XML文档的标准，是一套对文档的内容进行抽象和概念化的方法。W3C文档对象模型(DOM)是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来说，DOM是一种API(应用编程接口)

  • 说明：JavaScript对DOM进行了实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制

DOM标准

  • W3C DOM标准被分为3个不同的部分：

    • 核心 DOM：针对任何结构化文档的标准模型
    • XML DOM：针对XML文档的标准模型
    • HTML DOM：针对HTML文档的标准模型

  • XML DOM定义了所有XML元素的对象和属性，以及访问它们的方法

  • HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法

HTML DOM定义

  • HTML Document Object Model(文档对象模型)

  • HTML DOM定义了访问和操作HTML文档的标准方法

  • HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)

节点类型

  • 描述：DOM标准规定HTML文档中的每个成分都是一个节点(node)

  • 节点类型：

    • 文档节点(document对象)：代表整个文档
    • 元素节点(element 对象)：代表一个元素(标签)
    • 文本节点(text对象)：代表元素(标签)中的文本
    • 属性节点(attribute对象)：代表一个属性，元素(标签)才有属性
    • 注释节点(comment对象)：注释信息

节点关系

  • 描述：节点树中的节点彼此拥有层级关系。父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)
    • 在节点树中，顶端节点被称为根(root)
    • 每个节点都有父节点、除了根(它没有父节点)
    • 一个节点可拥有任意数量的子节点
    • 同胞是拥有相同父节点的节点
  • 访问：访问HTML元素等同于访问节点

节点查找

  • 直接查找：

    • document.getElementById('idname')：根据ID获取一个标签
    • document.getElementsByTagName('tagname')：根据标签名获取标签合集
    • document.getElementsByName('name')：根据name属性获取标签集合
    • document.getElementsByClassName(classname)：根据class属性获取

  • 间接查找：

    • parentNode：父节点(包括所有节点类型)
    • childNodes：所有子节点(包括所有节点类型)
    • firstChild：第一个子节点(包括所有节点类型)
    • lastChild：最后一个子节点(包括所有节点类型)
    • nextSibling：下一个兄弟节点(包括所有节点类型)
    • previousSibling：上一个兄弟节点(包括所有节点类型)

    下面比较重要，常用：

    • parentElement：父节点标签元素
    • children：所有子标签元素
    • firstElementChild：第一个子标签元素
    • lastElementChild：最后一个子标签元素
    • nextElementSibling：下一个兄弟标签元素
    • previousElementSibling：上一个兄弟标签元素

  • 注意：JavaScript中没有办法找到所有的兄弟标签

4. DOM对象的属性和操作

样式操作

  • 操作class类

    • className：获取所有样式类名(字符串)
    • classList.remove(cls)：删除指定类
    • classList.add(cls)：添加类
    • classList.contains(cls)：存在返回true，否则返回false
    • classList.toggle(cls)：存在就删除，不存在就添加

  • 指定css操作：obj.style.属性名="属性值"

    • JS操作CSS属性的规律:

      • 对于没有中横线的CSS属性一般直接使用style.属性名即可
      • 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

文本节点

  • innerText：所有的纯文本内容，包括子标签中的文本

  • outerText：与innerText类似

  • innerHTML：所有子节点(包括元素、注释和文本节点)

  • outerHTML：返回自身节点与所有子节点

  • textContent：与innerText类似，返回的内容带样式

  • data：文本内容

  • length：文本长度

  • createTextNode()：创建文本

  • normalize()：删除文本与文本之间的空白

  • splitText()：分割

  • appendData()：追加

  • deleteData(offset,count)：从offset指定的位置开始删除count个字符

  • insertData(offset,text)：在offset指定的位置插入text

  • replaceData(offset,count,text)：替换，从offset开始到offscount处的文本被text替换

  • substringData(offset,count)：提取从ffset开始到offscount处的文本

属性节点

  • attributes：获取所有标签属性

  • getAttribute()：获取指定标签属性

  • setAttribute()：设置指定标签属性

  • removeAttribute()：移除指定标签属

posted @ 2017-12-28 15:30  _岩哥  阅读(121)  评论(0)    收藏  举报