JS--DOM(文档对象模型)

含义

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API,通过 DOM 可以去改变文档。
简单的说,一个 web 网页就是一个文档,使用 DOM 改变文档就是使用 DOM 定义的一些方法操作具体的节点。比如用getElementById 来根据元素 id 来查找元素节点。
当浏览器载入HTML时,会生成相应的 DOM 树,大概长这样


JS--DOM(文档对象模型)_第1张图片
image.png

转化为代码就是如下:



    我是title


    我是超链接
    

我是p标签

对DOM的定义

对于一个 HTML 来说,文档节点 Document (是看不到的)就是它的根节点,这个根节点对应的对象就是 document ,我们可以通过根节点来访问它的子节点(Element 、Text)。

Document 类型

刚才说到 Document 是整个文档的根节点,我们想要访问某个节点的时候都必须通过 document 这个实例对象。

  • document 对象的常用属性:
document.documentElement   //可以直接拿到html的节点的引用
document.title                          //直接获取title节点的文本 即 我是title
document.url                           //获取url
  • doucument常用方法


    JS--DOM(文档对象模型)_第2张图片
    2018-04-24 10-26-44屏幕截图.png
document.getElementById()      //docment.getElementById('test') 可以获取到属性 id 为 ‘myId’ 的节点,在上面的代码中获取的也就是 p 节点
document.getElementsByTagName //docment.getElementByTagName('p') 可以获取到节点为 p 的所有节点集
document.documentElement       // 全部文档
document.body                             //文档的主体

以上的方法就使我们根据 document 对象中的方法获取到 HTML 中任意节点了

Element 类型

通常我们在使用 document 对象来获取节点时,返回的节点类型就是 Element 类型,所以我们想要对获取的节点进行操作,我们只需要使用 Element 包含的属性和方法即可。

  • 常用的属性
var myNode = document.getElementById('myId');
myNode.id // 获取该节点的 id ,即 ‘myId‘
myNode.tagName // 获取该节点的节点名,即 'P',大部分浏览器返回的标签名都是大写
myNode.className //获取该节点的 class
  • 操作节点属性的常用方法
//假如我们有一个 input,我们想要获取 input 的 type 属性,并对 type 属性进行操作

  
var myNode = document.getElementById('input')
myNode.getAttribute('type') // 获取属性值,即 ‘text’
myNode.setAttribute('type','password') // 将 type 属性值改为 password 类型
myNode.removeAttribute('type') // 移除 type 属性

实例

  • 对事件做出反应

要求:
当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中:
onclick=JavaScript

  • html事件的例子

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时




    

请点击这段文本!

// **相当于点击按钮时给h1进行赋值**
  • 从事件处理程序中调用函数:






请点击这段文本!

  • HTML 事件属性

如需向 HTML 元素分配事件,您可以使用事件属性。
向 button 元素分配一个 onclick 事件:





    

点击按钮来执行 displayDate() 函数。

  • 使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件:
为 button 元素分配 onclick 事件:




  

点击按钮来执行displayDate()

在上面的例子中,名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时,将执行函数。

onload 和 onunload 事件

当用户进入或离开页面时,会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。







弹出的提示框会告诉你浏览器是否已启用 cookie。

onchange 事件

onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时,将调用 upperCase() 函数。








请输入你的英文名:

当你离开输入框时,被触发的函数会把你输入的文本转换为大写字母。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数





Mouse Over Me

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。





点击这里

你可能感兴趣的:(JS--DOM(文档对象模型))