DOM笔记1

2023-07-16 14:01| 来源: 网络整理| 查看: 265

DOM

window：全局对象。每个窗口都是一个window对象 document：window的一个属性。也是一个对象。代表当前的整个网页。保存了网页上的所有内容。通过document对象可以操作网页上的内容。 DOM：document object model 文档对象模型。定义了访问和操作HTML文档（网页）的标准方法。通过document对象操作网页上的内容。 DOM元素：HTML标签

获取DOM元素

通过DOM返回的都是对象

我是div 通过id名获取

由于id具有唯一性。如果找到就返回一个dom对象，找不到就返回null

var oDiv = document.getElementById('box'); console.log(oDiv);//我是div 通过class名获取

由于class名具有重复性。如果找到返回一个存储了标签对象的数组，找不到返回一个空数组

let oDivs = document.getElementsByClassName("father"); console.log(oDivs);//HTMLCollection(2) [div.father, div#box.father, box: div#box.father] 通过name名获取

一般用于表单标签，由于name具有重复性。如果找到就返回一个存储了标签对象的数组。找不到就返回一个空数组

let oDivs = document.getElementsByName('test'); console.log(oDivs);//NodeList(2) [input, input] 通过标签名获取

由于标签名可重复。如果找到就返回一个存储了标签对象的数组。找不到就返回一个空数组

let oDivs = document.getElementsByTagName("div"); console.log(oDivs);//HTMLCollection(2) [div.father, div#box.father, box: div#box.father] 通过选择器获取

querySelector只会返回根据指定选择器找到的第一个元素

let oDiv = document.querySelector('input'); console.log(oDiv);//

querySelectorAll会返回指定选择器找到的所有元素

let oDivs = document.querySelectorAll(".father"); console.log(oDivs);//NodeList(2) [div.father, div#box.father] 节点

网页中最基本的组成每一个部分都是一个节点标签和标签之前的空格/回车标签的属性标签都是节点

节点的三个属性：

nodeName : 节点的名称，只读 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document nodeValue ：节点的值 1. 元素节点的 nodeValue 是 undefined 或 null 2. 文本节点的 nodeValue 是文本自身 3. 属性节点的 nodeValue 是属性的值 nodeType ：节点的类型元素类型节点类型元素 1 属性 2 文本 3 注释 8 文档 9 常用的节点类型： 1.文档节点：整个html文档（代表整个网页） 2.元素节点：html标签 3.属性节点：元素的属性 4.文本节点：标签中的文本内容元素 === 标签获取指定元素的子节点和子元素 1 2 3 4 5 对象.children获取子元素（子标签） let oDiv = document.querySelector('div'); console.log(oDiv.children);//HTMLCollection(5) [h1, h2, p.item, p, span] console.log(oDiv.childNodes);//NodeList(11) [text, h1, text, h2, text, p.item, text, p, text, span, text] 对象.childNodes获取子节点 let oDiv = document.querySelector('div'); console.log(oDiv.childNodes);//NodeList(11) [text, h1, text, h2, text, p.item, text, p, text, span, text] //标签和标签之间的回车也是一个节点(text节点）所以div标签一共有11个子节点 let oDiv = document.querySelector('div'); for(let node of oDiv.childNodes){ //遍历div的所有子节点 if(node.nodeType === Node.ELEMENT_NODE){ //得到所有子标签 console.log(node) } }

在这里插入图片描述

对象.firstChild 获取第一个子节点对象.firstElementChild 获取第一个子标签 let oDiv = document.querySelector('div'); console.log(oDiv.firstChild);//#text 是div和h1之间的回车（空白text节点） console.log(oDiv.firstElementChild);//1 对象.lastChild 获取最后一个子节点对象.lastElementChild 获取最后一个子标签 let oDiv = document.querySelector('div'); console.log(oDiv.lastChild);//#text 是和之间的回车（空白text节点） console.log(oDiv.lastElementChild);//5 对象.parentElement or 对象.parentNode获取某元素的父节点 let oDiv = document.querySelector('.item'); console.log(oDiv.parentNode);

在这里插入图片描述

获取相邻节点/元素 let item = document.querySelector('.item'); // 获取相邻上一个节点 console.log(item.previousSibling);//#text 是p和之间的空白节点 // 获取相邻上一个元素 console.log(item.previousElementSibling);//2 // 获取相邻下一个节点 console.log(item.nextSibling);//#text 是

和

之间的空白节点 // 获取相邻下一个元素 console.log(item.nextElementSibling);//

节点的增删改查创建标签：document.createElement 添加节点：父节点.appendChild 插入节点：父节点.insertBefore(新节点，旧节点) 在父节点的指定旧节点之前插入新节点删除节点：通过父节点删除，节点不能自己删除自己节点.parentNode.removeChild(节点) 克隆节点：cloneNode

cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true

我是标题我是段落 let oDiv = document.querySelector('div'); let newDiv = oDiv.cloneNode(true); console.log(newDiv);

在这里插入图片描述

元素属性的增删改查元素属性的读取：元素.属性名 or 元素.getAttribute(‘属性名’)

通过元素.属性名的形式不能访问到自定义的属性，会返回undefined 通过元素.getAttribute(‘属性名’) 的形式能访问到自定义的属性

let oImg = document.querySelector('img'); console.log(oImg.alt);//我是alt222 console.log(oImg.getAttribute('alt'));//我是alt222 console.log(oImg.nj);//undefined console.log(oImg.getAttribute('nj'));//666 元素属性的更改：元素.属性名 = 属性值 or 元素.setAttribute(‘属性名’,‘属性值’)

和元素属性的读取一样。通过元素.属性名 = 属性值的形式不能修改自定义的属性通过元素.setAttribute 的形式能修改自定义的属性

let oImg = document.querySelector('img'); oImg.title ='新的title'; oImg.setAttribute("nj", "123"); 元素属性的增加：元素.setAttribute(‘属性名’,‘属性值’)

setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改

oImg.setAttribute("it666", "itzb"); 元素属性的删除：元素.removeAttribute(‘属性名’) oImg.removeAttribute("nj");

【本文地址】

DOM笔记1

DOM笔记1

今日新闻

推荐新闻