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])

     

  • 相关阅读:
    个性化排序算法实践(三)——deepFM算法
    Textbox输入状态提示
    CheckBox状态多选
    TextBox各种设置
    CheckBox多选
    简单的动画
    样式中调用方法
    textbox获取焦点选中内容
    linq一般用法
    自定义表头Datagrid
  • 原文地址:https://www.cnblogs.com/xiaoliwang/p/9039005.html
Copyright © 2011-2022 走看看