zoukankan      html  css  js  c++  java
  • JavaScript高级(一)--HTML DOM

    ---恢复内容开始---

    DOM(Document Object Model)文档对象模型 

    一、 HTML DOM的作用

      1.官方: HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

      2.自述: 在JavaScript中使用,DOM中的document来完成获得,操作,添加,删除元素,内容,属性的操作的一个工具。

    二、DOM中的节点

       1.DOM是被视为节点树的HTML,我们将HTML中所有事物视为节点。整个HTML是一个节点,每个元素是一个节点,每个元素里面的文本是一个节点,每个元素的属性是一个节点。节点树如下图所见。

                

          2. 节点的父,子,同胞,如同树一样,节点之间存在父子关系,同一个父节点直接为同胞关系。且最上层的html为根节点,除了根节点没有父节点之外,所有节点都应该有父节点,但不一定有子节点。

    三、DOM中的方法

         1.我们在JavaScript中操作文档中的对象都是通过DOM中的方法来完成,所有方法都来自于document类。

         2.获得节点的方法:(当返回值为多个时,会生成一个Array对象,如果是单个则根据情况来定)

                 getElementById :               根据id值返回元素

                 getElementByName:          根据name值返回元素

                 getElementByTagName:    根据标签名值返回元素

                 getElementByClassName: 根据class值返回元素

         3.增加删除节点:

                appendChild() :       添加节点

                removeChild() :       删除节点

                replaceChild() :       替换节点

         4.新建节点:

                createTextNode():    创建属性节点

                createElement():      创建元素节点

                createAttribute():      创建文本节点

          5.属性值:

                getAttribute():  返回指定属性值

                setAttribute():  将指定属性值修改

          6.write:

               输出的一种方式之一,但是会直接覆盖掉原本的html

    四、属性

         1.innerHTML:内部HTML,既可以获得某元素内部值,也可以用于赋值修改。

         2.nodeName,nodeTpye,nodeValue:可以得到name,type,value的值也可以用于赋值修改。

    五、事件

         1.事件可以视为触发器,当某个条件成立时(可以使键盘,鼠标等一列因素达成的条件),则触发该方法的执行。

         2.onload与onunload,当用户进入网页和离开网页是会触发

         3.onchange,当节点被改变时则会触发,可以输入框的提示

         4.onmouseover和onmouseout:当鼠标移动到,鼠标离开时会触发

         5.onmousedown,onmouseup,onclick,hover当鼠标点击,释放时会触发,click则是点击,hover则是down和up结合,内置两个function

         6.
         

    ---恢复内容结束---

  • 相关阅读:
    软件开发(目录规范)
    面向对象编程(UDP协议)
    Django+uwsgi+Nginx
    Django(图书管理系统)
    orm(Manager isn't accessible via %s instances" % cls.__name)报错
    Django(图书管理系统)#转
    docker(mysql-redmine)
    Django(orm)转
    Django(多表查询操作)
    Oracle(ERROR SP2-0642)
  • 原文地址:https://www.cnblogs.com/qqwhsj/p/10840323.html
Copyright © 2011-2022 走看看