zoukankan      html  css  js  c++  java
  • THML DOM / Element 对象操作

    随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作

    获取Element节点

      熟悉的有  

        通过ID获取,返回element对象                 document.getElementById(elementId)  

        通过Name获取,返回element对象数组         document.getElementsByName(elementName)

        通过TagName获取,返回element对象数组    document.getElementsByTagName(tagName)

      随着浏览器发展,先大部分浏览器已经支持如下两种更为简单的获取Dom的方法,使用方法与Jquery选择器一样

        querySelector      返回类型:节点对象

        querySelectorAll    返回类型:节点对象数组

       通过子节点获得父节点

       childNode.parentNode

    Element常用方法和操作

    element.className 设置或返回元素的 class 属性
    element.clientHeight 返回元素的可见高度
    element.clientWidth 返回元素的可见宽度
    element.getAttribute() 返回元素节点的指定属性值
    element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false
    element.innerHTML 设置或返回元素的内容
    element.appendChild() 向元素添加新的子节点,作为最后一个子节点
    element.offsetLeft 返回元素的水平偏移位置
    element.offsetTop 返回元素的垂直偏移位置
    element.removeAttribute() 从元素中移除指定属性
    element.removeChild() 从元素中移除子节点
    element.style 设置或返回元素的 style 属性
    nodelist.length 返回 NodeList 中的节点数

    修改节点内容

    document.querySelector('p').innerHTML = 'new text'

    修改路径

    document.getElementById("image").src="landscape.jpg";
    document.querySelector('a').href = "http://www.qq.com"

    修改样式

    document.getElementById(id).style.backgroundColor='#ff0'

    绑定事件

    onclick=function(e){
          ...      
    }

    创建节点

          var para = document.createElement('a');
          para.innerHTML = 'baidu';
          para.setAttribute('href','https://www.baidu.com');
          document.querySelector('#box').appendChild(para);

    删除节点

    document.querySelector('ul').removeChild(document.querySelectorAll('li')[0])

     

  • 相关阅读:
    大话Ansible Ad-Hoc命令
    Ansible常用模块基本操作
    Java集合类总结
    HTTP文件上传原理
    Java IO流基础总结
    Java中的Enumeration、Iterable和Iterator接口详解
    网页缓存相关的HTTP头部信息详解
    4. OpenCV-Python——模版匹配、直方图
    3. OpenCV-Python——图像梯度算法、边缘检测、图像金字塔与轮廓检测与傅里叶变换
    2. OpenCV-Python——阈值、平滑处理、形态学操作
  • 原文地址:https://www.cnblogs.com/xiaoliwang/p/9039005.html
Copyright © 2011-2022 走看看