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

THML DOM / Element 对象操作的更多相关文章

  1. JavaScript -- 时光流逝(十二):DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

  2. 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象 1.返回顶部 1. HTML DOM Element 对象 HTML DOM ...

  3. DOM - Element 对象

    http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...

  4. javascript event对象操作

    js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...

  5. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  6. DOM基础知识(Node对象、Element对象)

    5.Node对象 u  遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u    子节 ...

  7. 原生JS中常用的Window和DOM对象操作汇总

    一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...

  8. DOM、Window对象操作

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...

  9. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

随机推荐

  1. Tablacus Explorer双心封装版

    Tablacus Explorer双心封装版 http://cloud.189.cn/t/mYj67j7r2Afq (TablacusExplorer17.3.27双心封装版.exe) http:// ...

  2. C++进阶--理解左值和右值

    /* * 理解左值和右值 * * * 为什么要关心这个? * 1. 有助于理解C++结构,搞明白编译器的错误和警告 * 2. C++ 11中引入了右值引用,理解左值右值是前提 * */ /* * 简单 ...

  3. 史上最全Spring面试71题与答案

    1.什么是spring? Spring是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring框架目标是简化Java企业 ...

  4. for循环计算li的个数

    今天有一段代码 在ie6下面显示 我检查了一下代码,发现每for循环一次,就会重新计算li的个数,会拖慢运行速度,所以改成以下代码,ie6就正常了

  5. mariadb semi plugin遇到的坑

    安装完semi plugin运行一段时间后,重启mariadb, 突然发现canal无法解析数据了,一直在报错,然后登陆mariadb, show plugins竟然没有看到之前安装的semi plu ...

  6. [UE4]缓存选项 Is volatile

    volatile:易变的,不稳定的; (液体或油) 易挥发的; 爆炸性的; 快活的,轻快的; UI中的Is Volatile选项:意思当前控件是容易变化的. 这个是一个性能上的优化. 默认情况下UI都 ...

  7. BCGcontrolBar(四) ListCtrl 操作输出显示

    Ribbon 的效果主要为在可停靠面板上放置各种组件 具体操作为新建一个watchbar 然后在watchbar上加入 ListCtrl组件 效果如下 因为是在可停靠面板上生成的 因此可以随意拖动 具 ...

  8. 有关Set集合的一个小问题

    先看两段代码: Demo1: Set<Short>s=new HashSet<>(); for(Short i=0;i<100;i++){ s.add(i); s.rem ...

  9. (转)wsdl文件用SoapUI快速创建WebService,CXF生成客户端代码

    原文地址:http://blog.csdn.net/fjekin/article/details/62234861 一.前言 最近项目接触到2C的很多接口,提供接口文档和WSDL文件,一开始测试接口都 ...

  10. boost serialize序列化

    boost序列化 #ifndef FND_SERI_H #define FND_SERI_H #include <boost/archive/text_oarchive.hpp> #inc ...