DOM节点基本方法和属性

最新推荐文章于 2022-12-09 19:37:37 发布

weixin_33708432

最新推荐文章于 2022-12-09 19:37:37 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/opacity-m/p/8099935.html

本文详细介绍了DOM（Document Object Model）的概念及其在现代浏览器中的应用。包括DOM的节点类型、获取节点的方法、遍历节点的方式以及如何创建、增加、修改和删除节点等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、DOM（Document Object Model）是由W3C规范

已接触标准组织：ECMA W3C

已经到DOM4了，dom.0是出现规范之前的方法

两大阵营：

支持：DOM浏览器（Chrome、Opera、Firefox、Safari）

不支持：IE（6.7.8、360、腾讯遨游等）

2、节点：node

（1）Tree

常用节点类型：

元素节点：head body 。。。。

属性节点：id maxlength

文本节点：文本内容

获取属性：

	nodeType	nodeName	nodeValue
元素	1	元素名	null
属性	2	属性名	属性值
文本	3	#text	文本内容

ById 获取的是元素

attr=text.attributes[0] 有个伪数组

Let text=title.firstChild;

window.onload=function(){

//元素

let oText=document.getElementById("text");

console.log(oText.nodeName);//h1

console.log(oText.nodeType);//1

console.log(oText.nodeValue);//null

//获取属性

let attr=oText.attributes[0];

console.log(attr.nodeType);//2

console.log(attr.nodeName);//id

console.log(attr.nodeValue);//text

//获取文本

let tx=oText.firstChild;

console.log(tx.nodeType);//3

console.log(tx.nodeName);//#text

console.log(tx.nodeValue);//文本

};

</script>

（2）获取节点方法：（document）

1、 document.getElementById

2、 document.getElementsByTagName 类型不是Array是集合使用for of 遍历

3、document.getElementsByName 节点里添加name属性和属性值获取多个

4、document.getElementsByClassName ps：有兼容问题

不考虑ie678的情况下

5、querySelector(“”) 传入选择器只能找到子元素的第一个

（推荐）6、querySelectorAll 可获取所有子元素

“div p[name=elementP]” 属性选择

（3）遍历节点：利用父与子，兄弟关系（父节点.）

遍历节点属性：

firstChild 第一个节点

lastChild 最后一个节点

nextSibling 下一个兄弟

previousSibling 上一个兄弟节点

parentNode 父节点

childNodes 所有子节点

Ps：注意换行有#text！！！

（4）创建节点（方法）（document.）

createElement 创建元素

createAttribute 创建属性

createTextNode 创建文本节点

（5）增加节点（父节点.）

appendChild 往节点的最后添加

添加属性：.属性

不同，className=“color”；

insertBefore 往节点的前面添加（新的，已经存在的）父.insertBefore（p，d2.firstchild）

（6）修改节点（父节点.）

replaceChild （新的节点，旧的节点）父.replaceChild （新的，要替换的）

（7）删除节点（父节点.）

removeChild

简化添加步骤：

innerHTML

innerText

注意：不是dom标准，但是浏览器都兼容，IE

innerHTML:标签不会被解析

特点1、返回一个字符串；

特点2、可以直接添加字符串

tr.innerHTML=“<P>增加段落</P>”+tr.innerHTML;

tr.innerHTML+="<P>增加段落</P>";

innerText:获取浏览器源码的时候，可以使用

multiple属性

option selected 获取选中状态

转载于:https://www.cnblogs.com/opacity-m/p/8099935.html