• HTML DOM介绍


      HTML DOM定义了一系列的对象,以及访问和处理HTML的方法。通过DOM可以浏览所有的HTML元素,不但可以修改或者删除元素的文本和属性,而且可以创建新的元素。

      一.首先对一个元素进行操作前,要得到要操作的元素,有三种方法得到元素:

      1.通过id名,getElementById(id)

      2.通过TagName,getElementByTagName(tagname)

      3.通过ClassName,getElementByClassName(classname)

      或者用jQuery方法来的到元素更加容易

      1.通过id名,$("#text")得到id="text"的元素

      2.通过TagName,$("p")得到所有的<p>元素

      3.通过ClassName,$(".text")得到class="text"的所有元素

      4.$(this)表示当前的HTML元素

      二.得到元素后就可以进行操作了

        1.属性innerHTML获得或设置元素文本内容

        2.改变样式:如将id="text‘的元素颜色改为红色

         var x=document.getElementById("#text");x.style.color="red";

        3.创建新的元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后

          var x=document.creatElement("p");

         var content=document.createTextNode("this is a new");

         x.appendChild(content);

         var y=document.getElementById("text");

         y.appendChild(x);

         jQuery方法操作

         1.属性:text()获得或设置元素文本

             html()获得或设置包含html标签的文本

             val()获得或设置表单的内容

             attr()h获得或设置属性

         2.样式:css()获得或设置CSS属性

         3.创建元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后

          $("#text").append("<p>this is a new p</p>");

      三.常见事件

        onclick 单击

        onload 加载页面

        onchange 改变输入字段的内容时触发

        onmouseover 鼠标移动到事件

        onmouseout 鼠标移出事件

        onmouseup 鼠标松开事件

        onmousedown 鼠标按下事件

        

  • 相关阅读:
    用户体验
    dwz中权限控制与跳转(转)
    synchronized详解
    CodeIgniter笔记
    linux,apache,php,mysql常用的查看版本信息的方法
    dwz中展开左侧菜单的指定列表
    Apache与Nginx的优缺点比较(转)
    如何在Oracle中复制表结构和表数据 【转载】
    apache配置虚拟主机
    Disallowed Key Characters(转)
  • 原文地址:https://www.cnblogs.com/it-body/p/5867775.html
Copyright © 2020-2023  润新知