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. ...
随机推荐
- STL基础--容器
容器种类 序列容器(数组,链表) Vector, deque, list, forward list, array 关联容器(二叉树),总是有序的 set, multiset根据值排序,元素值不能修改 ...
- git clone 指定分支 拉代码
1.git clone 不指定分支 git clone http://10.1.1.11/service/tmall-service.git 2.git clone 指定分支 git clone -b ...
- C#修改类模板
安装目录下 Program Files\vs2013\Common7\IDE\ItemTemplatesCache\CSharp\Code\2052\Class 注意:中文是2052 英文是1033 ...
- [UE4]Format Text
蓝图会自动把字符串中的占位换成参数输入. 字符串不会自动转换,需要手动转换
- quicktime player录屏没有声音的解决方法
作者:殊哥链接:https://www.zhihu.com/question/20251726/answer/94938941来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 让android程序根据重力感应旋转屏幕(支持4个方向旋转)
原文地址:http://blog.csdn.net/yixiaoqingyuz/article/details/6453798代码如下: ChangeOrientationHandler.java p ...
- CRM 2016 刷新 Iframe
在CRM中刷新IFame: /// <summary>刷新Iframe的内容,用于表单上刷新iframe里的内容</summary> var iframe = Xrm.Page ...
- URL传值乱码
JS端: &value=encodeURIComponent("value") C端: HttpUtility.UrlDecode(Request.Params[" ...
- Android7.0对dlopen的改变——读取私有.so结果变化
两个内存段 在同一个进程空间中dlopen一个.so文件,理论上在内存中是同一片区域,但实际调试中发现Android7.0(read "/proc/self/maps")中,先后读 ...
- Linux TCP/IP调优-Linux内核参数注释
固定文件的内核参数 下列文件所在目录: /proc/sys/net/ipv4/ 名称 默认值 建议值 描述 tcpsyn_retries 5 1 对于一个新建连接,内核要发送多少个SYN连接请求才决定 ...