zoukankan      html  css  js  c++  java
  • DOM编程从入门到忘记

    文档对象模型(Document Object Model,DOM)是使用 W3C 定义的 API (Application Program Interface) 来操作 HTML 文档 (此处不局限于 HTML,亦可操作 XHTML、XML 等),使用户可以与进行页面交互。

    它使用对象的表示方式来表示对应的文档结构及其中的内容。

    通过使用 DOM 提供的 API (Application Program Interface) 可以动态的修改节点(node),也就是对 DOM 树的直接操作。 浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。

    动态的修改节点可以分为两步,1. 找到一个节点或者说标签 2. 操作这个标签。

    一、查找元素

    1、直接查找

    document.getElementById             根据ID获取一个标签
    document.getElementsByName          根据name属性获取标签集合
    document.getElementsByClassName     根据class属性获取标签集合
    document.getElementsByTagName       根据标签名获取标签集合
    

    2、间接查找

    // 包含标签中间的文本
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
     
    //不包含标签中间的文本
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素
    

    二、操作元素

    1、内容

    innerText   纯文本
    outerText
    innerHTML   HTML内容,可以包含标签
    outerHTML  
    value       表单标签选中的值
    
    input表单类标签
    input--text,password,check...
    

    2、属性

    attributes                // 获取所有标签属性
    setAttribute(key,value)   // 设置标签属性
    getAttribute(key)         // 获取指定标签属性
     
    /*
    var atr = document.createAttribute("class");
    atr.nodeValue="democlass";
    document.getElementById('n1').setAttributeNode(atr);
    */
    

    3、class操作

    className                // 获取所有类名
    classList                // 获取所有类名,以列表形式
    classList.remove(cls)    // 删除指定类
    classList.add("cls")       // 添加类
    
    document.getElementById('gettxt').classList
    >> ["c1","hide"]
    

    4、标签操作

    a.创建标签

    // 方式一
    var tag = document.createElement('a')
    tag.innerText = "dyan"
    tag.className = "c1"
    tag.href = "http://www.cnblogs.com/***"
     
    // 方式二
    var tag = "<a class='c1' href='http://www.cnblogs.com/***'>dyan</a>"
    

    b.操作标签

    // 方式一
    var obj = "<input type='text' />";
    xxx.insertAdjacentHTML("beforeEnd",obj);
    xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
     
    //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
     
    // 方式二
    var tag = document.createElement('a')
    xxx.appendChild(tag)
    xxx.insertBefore(tag,xxx[1])
    

    5、样式操作

    var obj = document.getElementById('i1')
     
    obj.style.fontSize = "32px";
    obj.style.backgroundColor = "red";
    
    <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
    
    <script>
       function Focus(ths){
           ths.style.color = "black";
           if(ths.value == '请输入关键字' || ths.value.trim() == ""){
    
               ths.value = "";
           }
       }
    
       function Blur(ths){
           if(ths.value.trim() == ""){
               ths.value = '请输入关键字';
               ths.style.color = 'gray';
           }else{
               ths.style.color = "black";
           }
       }
    </script>
    

    6、位置操作

    总文档高度
    document.documentElement.offsetHeight
      
    当前文档占屏幕高度
    document.documentElement.clientHeight
      
    自身高度
    tag.offsetHeight
      
    距离上级定位高度
    tag.offsetTop
      
    父定位标签
    tag.offsetParent
      
    滚动高度
    tag.scrollTop
     
    /*
        clientHeight -> 可见区域:height + padding
        clientTop    -> border高度
        offsetHeight -> 可见区域:height + padding + border
        offsetTop    -> 上级定位标签的高度
        scrollHeight -> 全文高:height + padding
        scrollTop    -> 滚动高度
        特别的:
            document.documentElement代指文档根节点
    */
    

    7、提交表单

    document.geElementById('form').submit()
    

    8、其他操作

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框
      
    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载
      
    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器
    

    三、事件

    • onclick 单击
    • ondblclick 双击
    • onfocus 元素获得焦点
    • onblur 元素失去焦点
    • onmouseover 鼠标移到某元素之上
    • onmouseout 鼠标从某元素移开
    • onmousedown 鼠标按钮被按下
    • onmouseup 鼠标按键被松开
    • onkeydown 某个键盘按键被按下
    • onkeyup 某个键盘按键被松开
    • onkeypress 某个键盘按键被按下并松开

    对于事件需要注意的要点:
    a 绑定

    方式一
    <button onclick="displayDate()">试一试</button>
    
    方式二
    <script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
    </script>
    

    b 事件触发

    this标签当前正在操作的标签,event封装了当前事件的内容

    • this 触发当前事件的标签
    • event 触发当前标签的事件内容 keycoode
    • 事件链以及跳出
    • 自定义事件 > 默认事件
    <a href ="http://baidu.com" onclick="return Func();">sou baidu</a>
    // 自定义事件优先级大于默认事件
    // 阻止默认事件 加上 return 
    <script>
    function Func(){
        alert(转去百度);
        return false;  //true执行默认事件,false不执行默认事件
    }
    </script>
    
  • 相关阅读:
    iCloud文件同步至Mac本地磁盘
    hive多分区写入
    清理hdfs小文件shell脚本
    大数据应用建设开源工具-update2019-07
    手机号码段:中国工信.三大运营商号段-update2019-09
    sparkf:spark-sql替换hive查询引擎
    hivef:hive 执行 sql 文件
    azkaban 工作流2.0开发示例
    MySQL-时间+日期函数
    大数据仓库对业务数据的几个基本要求
  • 原文地址:https://www.cnblogs.com/lidyan/p/6889648.html
Copyright © 2011-2022 走看看