DOM基础

最新推荐文章于 2024-10-01 20:12:28 发布

丹妮蛋泥旦尼

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量183

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49963794/article/details/107903910

版权

本文介绍了DOM的基础知识，包括节点属性、获取DOM元素、节点遍历、创建与插入节点、复制和删除节点的方法。还详细讨论了Object.assign在DOM中的应用以及如何增添class样式。同时，讲解了DOM的属性，如宽高、位置属性的获取和设置，以及如何操作节点的属性。

摘要由CSDN通过智能技术生成

DOM对象

什么是DOM：页面的主体部分 Document Object Model

节点

节点属性

1、节点名称：任何标签的节点名称（nodeName），都是该标签的大写字母（如：DIV）

元素节点的 nodeName 是标签名称
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment

2、节点值（nodeValue）

console.log(document.body.firstChild.nodename==="DIV")//判断选中的标签是哪一个
console.log(document.body.firstChild.nodeTypeconstructor===HTMLDivElement)//判断节点是否是DIV
console.log(document.body.firstChild.nodeValue)
1为元素节点，2为属性节点，3为文本节点，8为注释节点，9为根元素节点

3、节点类型（nodeType）

元素、属性、文本、注释、文档属于节点

获取节点的方法：document.getElementById()
 document.getElementsByTagName

获取DOM元素

1、通过id获取元素
document.getElementById("id")  

2、通过标签名获取标签列表，只能通过document获取元素HTMLcollection列表
document.getElementsByTagName("id");

3、通过Class名获取标签列表，任何标签都可以获取其子项中Class列表,HTMLCollection
document.getElementClassName("div0");

4、通过name属性获取节点列表，只能通过document获取,NodeList列表
document.getElementByName();//Nodelist，可以在XMl中使用，用来区分表单
（表单必须写name,提交时使用，可以根据name获取列表，非表单标签不能添加name，不属于原生属性）
//nodeList列表是可以使用forEach方法遍历的


5、选择选择器列表中的第一个元素
var div=document.querySelector(所有选择器) div=document.querySelector("#div0");//根据id选择元素
div=document.querySelector(".div")；根据class选择元素
var div=document.querySelector("[type=text]")；根据name选择选择器可以获取的所有内容
var div=document.querySelectorAll()；/