复习DOM相关操作
来源:互联网 发布:淘宝联盟默认推广位 编辑:程序博客网 时间:2024/06/02 03:14
一、DOM节点创建
DOM节点(Node)最主要的三类为:
- Element,元素节点
- Attribute,属性节点
- Text,文本节点
DOM节点创建最常用方法:
- document.createElement()
- document.createTextNode()
var node1 = document.createElement('div');var node2 = document.createTextNode('hello world!');
二、DOM查询
- 返回当前文档中第一个类名为 “myclass” 的元素
var el = document.querySelector(".myclass");
- 返回一个文档中所有的class为”note”或者 “alert”的div元素
var els = document.querySelectorAll("div.note, div.alert");
- 获取元素
var el = document.getElementById('xxx');var els = document.getElementsByClassName('highlight');var els = document.getElementsByTagName('td');
Element也提供了很多相对于元素的DOM导航方法:
- 获取父元素、父节点
var parent = ele.parentElement;var parent = ele.parentNode;//只读,没有兼容性问题var offsetParent=ele.offsetParent;//只读,找到最近的有定位的父节点。 //没有定位父级时,默认是body;但在IE7以下,如果当前元素没有定位属性,返回body,如果有,返回HTML; //如果当前元素某个父级触发了haslayout,则返回触发了haslayout这个元素。
- 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
var nodes = ele.children;//标准下、非标准下都只含元素类型,但对待非法嵌套的子节点,处理方式与childNodes一致。 var nodes = ele.childNodes;//非标准下:只包含元素类型,不会包含非法嵌套的子节点。 //标准下:包含元素和文本类型,会包含非法嵌套的子节点。
- 获取元素属性列表
var attr = ele.attributes; 查询子元素
var els = ele.getElementsByTagName(‘td’);
var els = ele.getElementsByClassName(‘highlight’);当前元素的第一个/最后一个子元素节点
var el = ele.firstChild;//对待标准和非标准模式,如childNodsvar el = ele.lastChild;var el = ele.firstElementChild;//非标准不支持var el = ele.lastElementChild;
- 下一个/上一个兄弟元素节点
var el = ele.nextSibling;var el = ele.previousSibling;var el = ele.nextElementSibling;var el = ele.previousElementSibling;
- 兼容的获取第一个子元素节点方法:
var first=ele.firstElementChild||ele.children[0];
三、DOM更改
- 添加、删除子元素
ele.appendChild(el);ele.removeChild(el);
- 替换子元素
ele.replaceChild(el1, el2);
插入子元素
parentElement.insertBefore(newElement, referenceElement);
克隆元素
ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
四、属性操作
- 获取一个{name, value}的数组
var attrs = el.attributes;
- 获取、设置属性
var c = el.getAttribute('class');el.setAttribute('class', 'highlight');
- 判断、移除属性
el.hasAttribute('class');el.removeAttribute('class');
- 是否有属性设置
el.hasAttributes();
innerHTML与outerHTML的区别?
比如对于这样一个HTML元素:
content
。innerHTML:内部HTML,content
;
outerHTML:外部HTML,
content
; innerText:内部文本,content;
outerText:内部文本,content;
上述四个属性不仅可以读取,还可以赋值。outerText和innerText的区别在于outerText赋值时会把标签一起赋值掉,另外xxText赋值时HTML特殊字符会被转义。
jQuery的html()与innerHTML的区别?
jQuery的.html()会调用.innerHTML来操作,但同时也会catch异常,然后用.empty(), .append()来重新操作。 这是因为IE8中有些元素(比如input等)的.innerHTML是只读的。
阅读全文
0 0
- 复习DOM相关操作
- DOM相关操作
- JS中的DOM相关知识复习笔记
- jQuery的相关DOM操作
- JS的dom相关操作
- angularJS DOM操作相关指令
- DOM操作--表格的相关操作
- DOM复习
- Java 键盘输入相关操作(复习笔记)
- DOM基础及相关HTML操作
- JS:DOM相关:table对象,节点操作
- jQuery操作DOM节点的相关方法
- HTML DOM概念及相关操作
- js中操作dom的方法(复习)
- DOM相关
- DOM的复习
- js-dom复习2
- js-dom复习3
- vim 文件编辑 基本命令
- tomcat配置SSL报错解决:java.lang.IllegalArgumentException: Invalid character (CR or LF) found in method nam
- ON DUPLICATE KEY UPDATE
- 正则匹配href错误 expected string or bytes-like object
- 成为更好的Android开发者前,我们需要注意的31个细节
- 复习DOM相关操作
- Android 设置全屏样式主题的总结
- sublime常用插件
- 21 Aug 2017 java中实现注册时Email激活验证
- ExecutorService中submit和execute的区别
- 第三周编程题_查找里程
- Oracle回滚段使用查询
- 数据结构——第三章 列表
- TypeError: unbound method x must be called with x instance as first argument (got nothing instead)