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])
THML DOM / Element 对象操作的更多相关文章
- JavaScript -- 时光流逝(十二):DOM -- Element 对象
JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象 1.返回顶部 1. HTML DOM Element 对象 HTML DOM ...
- DOM - Element 对象
http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...
- javascript event对象操作
js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...
- 前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
- DOM基础知识(Node对象、Element对象)
5.Node对象 u 遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u 子节 ...
- 原生JS中常用的Window和DOM对象操作汇总
一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...
- DOM、Window对象操作
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
随机推荐
- Tablacus Explorer双心封装版
Tablacus Explorer双心封装版 http://cloud.189.cn/t/mYj67j7r2Afq (TablacusExplorer17.3.27双心封装版.exe) http:// ...
- C++进阶--理解左值和右值
/* * 理解左值和右值 * * * 为什么要关心这个? * 1. 有助于理解C++结构,搞明白编译器的错误和警告 * 2. C++ 11中引入了右值引用,理解左值右值是前提 * */ /* * 简单 ...
- 史上最全Spring面试71题与答案
1.什么是spring? Spring是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring框架目标是简化Java企业 ...
- for循环计算li的个数
今天有一段代码 在ie6下面显示 我检查了一下代码,发现每for循环一次,就会重新计算li的个数,会拖慢运行速度,所以改成以下代码,ie6就正常了
- mariadb semi plugin遇到的坑
安装完semi plugin运行一段时间后,重启mariadb, 突然发现canal无法解析数据了,一直在报错,然后登陆mariadb, show plugins竟然没有看到之前安装的semi plu ...
- [UE4]缓存选项 Is volatile
volatile:易变的,不稳定的; (液体或油) 易挥发的; 爆炸性的; 快活的,轻快的; UI中的Is Volatile选项:意思当前控件是容易变化的. 这个是一个性能上的优化. 默认情况下UI都 ...
- BCGcontrolBar(四) ListCtrl 操作输出显示
Ribbon 的效果主要为在可停靠面板上放置各种组件 具体操作为新建一个watchbar 然后在watchbar上加入 ListCtrl组件 效果如下 因为是在可停靠面板上生成的 因此可以随意拖动 具 ...
- 有关Set集合的一个小问题
先看两段代码: Demo1: Set<Short>s=new HashSet<>(); for(Short i=0;i<100;i++){ s.add(i); s.rem ...
- (转)wsdl文件用SoapUI快速创建WebService,CXF生成客户端代码
原文地址:http://blog.csdn.net/fjekin/article/details/62234861 一.前言 最近项目接触到2C的很多接口,提供接口文档和WSDL文件,一开始测试接口都 ...
- boost serialize序列化
boost序列化 #ifndef FND_SERI_H #define FND_SERI_H #include <boost/archive/text_oarchive.hpp> #inc ...