DOM相关

归纳一下,

不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样,一般推荐使用DOM Core方法和属性,尽管稍显繁杂。

常见的Core DOM方法如下:

1、创建节点

createElement()

createTextNode()

2、复制节点

cloneNode()

3、插入节点

appendChild()

insertBefore()

4、删除节点

removeChild()

5、替换节点

replaceChild()

6、查找和设置节点属性

setAttribute()

getAttribute()

7、查找节点

getElementById()

getElementsByTagName()

hasChildNode()

常见的Core DOM属性如下:

node.childNodes

node.firstChild

node.lastChild

node.nextSibling

node.previousSibling

node.parentNode

总结/回顾:

DOM 基本方法

直接引用方法:

1、documen.getElementById(id);

2、document.getElementByTagName(tagName);

返回一个数组,包含对这些节点的引用

间接引用节点

3、子节点element.childNode

返回element的所有子节点,通过element.childNodes[i]的方式来调用

Element.firstChild = element.childNodes[0];

Element.lastChild = element.childNodes[element.childNodes.length-1];

4、父节点element.parentNode

5、下一个兄弟节点element.nextSibling;

上一个兄弟节点element.previousSibling;

获得节点信息

6、nodeName属性获得节点名称eg:<a></a>返回”a”; class=”test”返回”test”; 文本节点返回文本内容。

7、nodeType返回节点的类型。元素节点返回1;属性节点返回2;文本节点返回3;

8、nodeValue返回节点的值。元素节点返回null;属性节点返回undefined;文本节点返回文本内容。

9、hasChildNodes()返回布尔值,判断是否含有子节点。

10、tagName属性返回元素的标记名称。等价于nodeName属性

处理属性节点

11、用setAttributeNode()方法给元素节点添加属性。

ElementNode.setAttribute(attributeName,attributeValue); 参数分别为(属性名称,属性值)

12、用getAttribute()方法获得属性值

处理文本节点

13、innerHTML和innerText方法

改变文档的层次结构

14、创建元素节点document.createElement()

15、创建文本节点Document.createTextNode();

//注: document.createTextNode(" ");他不会通过html编码,也就是说这里创建的不是空格,而是字符串

16、添加子节点 appendChild()。parentElement.appendChild(childElement);

17、插入子节点insertBefore()。

appendChild、insertBefore和insertAfter(自定义函数) 的区别

18、使用replaceChild方法取代子结点。parentNode.replaceChild(newNode,oldNode);

19、使用cloneNode方法复制结点 。node.cloneNode(includeChildren); includeChildren为bool,表示是否复制其子结点 。

20、使用removeChild方法删除子结点 。parentNode.removeChild(childNode);

时间: 2024-10-05 05:04:47

DOM相关的相关文章

Jsoup代码解读之二-DOM相关对象

Jsoup代码解读之二-DOM相关对象 之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多.这篇文章会说明Jsoup的DOM结构,DOM的遍历方式.在下一篇文章,我会并结合这两个基础,分析一下Jsoup的HTML输出功能. DOM结构相关类 我们先来看看nodes包的类图: 这里可以看到,核心无疑是Node类. Node类是一个抽象类,它代表DOM树中的一个节点,它包含: 父节点parent

关于DOM相关的几个tips

1.通过监听beforeunload事件可以用来询问用户是否确定离开当前页面. 2.通过将cookie的max-age值设置为0,可以删除该cookie值. 3.通过audio元素的canPlayType方法可以测试浏览器对音频资源的兼容性 4.如何获取label元素for属性的值,除getAttribute方法以外,我们可以通过属性访问表达式获取,但是for为JS关键字,所以DOM中使用的是htmlFor来替代for. 5.DOM2级事件规定事件包括三个阶段:① 事件捕获阶段 ② 处于目标阶段

DOM的定义及DOM相关

DOM : Document Object Model 文档对象模型文档:html页面文档对象:页面中元素文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点) DOM节点 getElementByIdgetElementByTagNamedocumentdocument.body 元素.childNodes : 只读 属性 子节点列表集合:标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点:非标准

DOM相关知识点以及原型

DOM(增删改查): 查询 1.获取元素 1.1标准DOM API document.getElementById document.getElementsByTagName document.getElementsByName document.getElementsByClassName document.querySelectorAll 1.2亲属访问 1.3属性获取 getAttribute getAttributeNode 2.获取属性值 var attrNode=node.getAt

dom相关指令

1.ng-show  和 ng-hide 当ng-show=''true''的时候 dom会显示,反之隐藏,通过控制display属性 2.ng-if 当ng-if=“true” 的时候,dom显示,反之隐藏,通过创建删除dom节点的方式. 3.ng-switch.用法如: <div ng-switch on="bBtn"> <p ng-switch-default>默认的效果</p> <p ng-switch-when="false

Javascript Dom 相关知识整理

一.选择器 document.getElementById document.getElementsByTagName document.getElementsByClassName(ie9) document.getElementsByName document.querySelector document.querySelectorAll querySelector和getElementBy系列的不同之处: 1. querySelector 属于W3C的Selectors API 规范,ge

DOM相关操作

(一)childNodes兼容性问题较多 1.元素节点:1 2.文本节点:3 3.属性节点:2 元素.childNodes:只读  属性  子节点列表集合 标准下:包含了文本和元素类型的节点,并且也会包含非法嵌套的子节点 非标准下:只包含元素类型的节点,IE7以下不会包含非法嵌套的子节点 childNodes只包含一级子节点,不包含后辈节点 DOM节点的类型有很多种  12种 元素.nodeType:只读  属性  当前元素的节点类型 元素.attributes:只读  属性 属性列表集合 (二

javascript DOM相关总结

DOM是客户端javascript最重要的部分.包括以下几块内容: DOM的节点类型 DOM的对象属性 DOM的节点操作:增.删.改.查 DOM事件 DOM节点类型: 文档:文档本身 document. 元素:标签 .如 <body></body>.<p></p> 属性:标签中的属性.如 <form method="" action="">中的method.action 文本: 页面中的文本.如<p&

20150423 DOM相关元素操作

相关元素:1.obj.nextSibling下一个元素(注意回车与空格)2.obj.previousSibling上一个元素(注意回车与空格)3.obj.parentNode父级元素.4.obj.childNodes所有的子级元 属性: obj.firstChild obj.lastChild obj.childNode[n] 方法: obj.appendChild(元素对象); //元素对象,不是一个HTML的字符串 d.insertBefore(要插入的元素对象,相对于哪个元素); d.re