第十二篇 DOM 操作 - 常用方法和常用属性

by caix in 深圳

DOM 常用方法

获取节点

 1、通过id号来获取元素，返回一个元素对象
 
    document.getElementById("idName")
 
2、通过 name属性 获取元素，返回元素对象数组 NodeList
 
    document.getElementsByName("name")
 
3、通过class来获取元素，返回元素对象数组 NodeList
 
    document.getElementsByClassName("className")
 
4、通过标签名获取元素，返回元素对象数组 NodeList
 
    document.getElementsByTagName("tagName")
 
5、DOM 中的每个 HTML 元素也是一个节点，可以像这样查找节点
 
   通过 CSS 选择器（类名、Id、标签名）获取元素，H5 新增
 
   如果通过 类名 或 Id 方式 获取，前面要加选择器符号 ‘.’ ‘#’
 
      document.querySelector('h1')
 
      document.querySelectorAll('h1')
 
   querySeleor: 返回指定选择器的第一个元素对象，如有多个只取第一个
 
   querySelorAll: 返回指定选择器的所有元素对象集合，NodeList

获取 / 设置元素的属性值

 let element = document.getElementById("idName")
 
1、括号传入属性名，返回对应属性的属性值
 
   element.getAttribute("attributeName")
 
2、传入属性名及设置的值 给元素设置属性
 
   element.setAttribute("attributeName","attributeValue")

创建节点 Node

 let element = document.getElementById("idName")
 
1、创建一个 html 元素，这里以创建 h3 元素为例
 
   document.createElement("h3")
 
2、创建一个文本节点
 
   document.createTextNode("String")
 
3、创建一个属性节点，这里以创建 class 属性为例
 
   element.createAttribute("class")

添加节点

 let element = document.getElementById("idName")
 
1、往 element 内部最后面添加一个节点，参数是节点类型
 
   element.appendChild(Node)
 
2、在 element 内部中的 existingNode 前面插入 newNode
 
   element.insertBefore(newNode,existingNode)
 
3、往 element 内部最后面添加插入 Node节点 或 字符串
 
   element.append(Node 或 "字符串" )
 
    append 可插入Node节点或字符串，但 appendChild 只能插入 Node 节点
 
    append 可传入多个参数但 appendChild 只接受一个参数
  
    parent.append(Node, Node, 'Hello world')

删除节点

 let element = document.getElementById("idName")
 
1、删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回 null
 
   element.removeChild(node)

DOM 常用属性

获取当前元素的父节点

 let element = document.getElementById("idName")
 
 返回当前元素的父节点对象
 
 element.parentNode

获取当前元素的子节点

 let element = document.getElementById("idName")
 
1、返回当前元素所有子元素节点对象，只返回 HTML 节点 
 
    element.children
2、返回当前元素所有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
 
    element.childNodes
3、返回当前元素的第一个子节点对象
 
    element.firstChild
4、返回当前元素的最后一个子节点对象
 
    element.lastChild

获取当前元素的同级元素

 let element = document.getElementById("idName")
 
1、返回当前元素的下一个同级元素 没有就返回 null
 
    element.nextSibling
 
2、返回当前元素上一个同级元素 没有就返回 null
 
    element.previousSibling

获取当前元素的文本

 let element = document.getElementById("idName")
 
1、返回元素的所有文本，包括 html 代码
 
    element.innerHTML
 
2、返回当前元素的自身及子代所有文本值，只是文本内容，不包括 html 代码
 
    element.innerText

获取当前节点的节点类型

 let element = document.getElementById("idName")
 
1、返回节点的类型,数字形式（1-12）
 
  常见几个 1：元素节点，2：属性节点，3：文本节点
 
    element.nodeType => 1

设置样式

 let element = document.getElementById("idName")
 
1、设置元素的样式时使用 style
 
   element.style.color = "#ffffff"

DOM 扩展

选择器

js 常用的功能就是根据 css 选择器与某个模式匹配的 DOM 元素

可以在类型 Docment、DocumentFragement、Element 中调用

querySelector() 方法

接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有返回 null

在 Document 上使用时，会从文档元素开始搜索

在 Element 上使用时，则只会从当前元素的后代中查询

如果选择符有语法错误或碰到不支持的选择符，会抛异常

 获取 <body> 元素
let body = document.querySelector("body")
 
获取 ID 为 “myDiv” 的元素
let myDiv = document.querySelector("#myDiv")
 
获取类名为 “selected” 的第一个元素
let selected = document.querySelector(".selected")

querySelectorAll() 方法

接收 CSS 选择符参数，返回所有匹配的节点，返回一个NodeList的静态实例（“快照”并非"实时"），如果没有返回空的 NodeList 实例

可以在 Document、DocumentFragment 和 Element 类型上使用。如果选择符有语法错误或碰到不支持的选择符，会抛异常

 取得 ID 为 "myDiv" 的 <div> 元素中的所有 <em> 元素
let ems = document.getElementById("myDiv").querySelectorAll("em");

返回的 NodeList 对象可以通过 for-of 循环、item()方法或中括号语法取得个别元素

   let strongElements = document.querySelectorAll("p strong"); 
  
  以下 3 个循环的效果一样
  
  for (let strong of strongElements) { 
    strong.className = "important"; 
  } 
  
  for (let i = 0; i < strongElements.length; ++i) { 
    strongElements.item(i).className = "important"; 
  } 
  
  for (let i = 0; i < strongElements.length; ++i) { 
    strongElements[i].className = "important"; 
  }

matchSelector() 方法

接收一个 CSS 选择符参数，如果元素匹配则该选择符返回 true，否则返回 false

   if (document.body.matchSelector("body.page1")){ 
      do something
  }

元素遍历

E9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会

这样就导致了 childNodes 和 firstChild 等属性上的差异

为了弥补这个差异，同时不影响 DOM 规范，W3C 通过新的 Element Traversal 规范定义了一组新属性

1、childElementCount 返回子元素数量（不包含文本节点和注释）

2、firstElementChild 指向第一个 Element 类型的子元素

3、lastElementChild 指向最后一个 Element 类型的子元素

4、previousElementSibling 指向前一个 Element 类型的同胞元素

5、nextElementSibling 指向后一个 Element 类型的同胞元素

  原来要这样写
 
    let parentElement = document.getElementById('parent'); 
    let currentChildNode = parentElement.firstChild; 
    
    没有子元素，firstChild 返回 null，跳过循环
     
    while (currentChildNode) { 
     if (currentChildNode.nodeType === 1) { 
     
         如果有元素节点，则做相应处理
         
        processChild(currentChildNode); 
        
     }   
     if (currentChildNode === parentElement.lastChild) { 
     	break; 
     } 
     currentChildNode = currentChildNode.nextSibling; 
    }

  使用了 Element Traversal 简化后
 
  let parentElement = document.getElementById('parent'); 
  let currentChildElement = parentElement.firstElementChild;
  
 没有子元素，firstElementChild 返回 null，跳过循环
 
  while (currentChildElement) { 
  
     这就是元素节点，做相应处理
     
     processChild(currentChildElement); 
     
     if (currentChildElement === parentElement.lastElementChild) { 
     	break; 
     } 
     currentChildElement = currentChildElement.nextElementSibling; 
  }

CSS 类扩展

getElementsByClassName()

接收一个参数，即包含一个或多个类名的字符串，返回类名中包含相应类的元素的 NodeList

如果提供了多个类名，则顺序无关紧要

 取得所有类名中包含 "username" 和 "current" 元素
 
这两个类名的顺序无关紧要
 
let allCurrentUsernames = document.getElementsByClassName("username current"); 
 
取得 ID 为 "myDiv" 的元素子树中所有包含 "selected" 类的元素
let selected = document.getElementById("myDiv").getElementsByClassName("selected");

classList()

classList 是一个新的集合类型 DOMTokenList 的实例

与其他 DOM 集合类型一样，也有 length 属性表示自己包含多少项

也可以通过 item() 或中括号取得个别的元素

 DOMTokenList 还增加了以下方法
 
1、add(value)  向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做
 
2、contains(value)  返回布尔值，表示给定的 value 是否存在
 
调用 contains() 方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点
 
3、remove(value)  从类名列表中删除指定的字符串值 value
 
4、toggle(value)  如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。

 div.classList.remove("disabled"); => 删除"disabled"类
 
div.classList.add("current"); => 添加"current"类
 
for (let class of div.classList){  => 迭代类名
 	doStuff(class); 
}

焦点管理

document.activeElement

 document.activeElement  当前拥有焦点的DOM元素
 
默认情况下，页面加载后设置为 document.body, 页面加载之前为 null

document.hasFocus()

 document.hasFocus() 文档是否拥有焦点，返回布尔值

HTMLDocument 扩展

readyState 属性

 loading 文档正在加载
 
complete 文档加载完成
 
最好是把 document.readState 当成一个指示器，以判断文档是否加载完毕
 
代替以前依赖 onload 事件监听做处理逻辑
 
  if (document.readyState == "complete"){ 
    // 执行操作
  }

compatMode 属性

 指示当前浏览器处于什么渲染模式
 
"CSS1Compat"  标准模式
 
"BackCompat"  混杂模式

head 属性

 	let head = document.head   => 直接取得 <head> 元素

自定义数据属性

给元素指定非标准属性，前缀是 data- , 通过 dataset 属性访问和设置

 <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
 
    let div = document.getElementById("myDiv"); 
    
    取得自定义数据属性的值
    let appId = div.dataset.appId;  
    let myName = div.dataset.myname; 
    
    设置自定义数据属性的值
    div.dataset.appId = 23456; 
    div.dataset.myname = "Michael"; 
    
    有 "myname" 吗？
    if (div.dataset.myname){ 
     	console.log(`Hello, ${div.dataset.myname}`); 
    }

字符集属性

document.charset 属性表示文档使用的字符集

docum.defaultCharset 属性根据默认浏览器及操作系统的设置，当前文档默认的字符集

 document.charset => 'UTF-8' // 获取
 
document.charset = 'UTF-8'  // 设置

插入标签

innerHTML 属性

 读模式 下返回调用元素的所有子节点
 
写模式 下根据指定的值创建新的 DOM 树，替换所有子元素
 
注意: 读模式得到子节点内容会被转义。 为 innerHTML 设置的包含 html 的字符串值与解析后 innnerHTML 的值大不相同。
 
div.innerHTML = '<p>dddd</p>';

outerHTML 属性

 读模式 返回调用元素本身及它的所有子元素
 
写模式 替换调用元素
 
div.outerHTML 
 
注意: 读模式得到内容会被转义

insertAdjacentHTML()

接收两个参数，插入的位置和要插入的 HTML 文本，第一个参数必须是下列值之一

 "beforebegin"  在当前元素之前插入一个紧邻的同辈元素
 
"afterbegin"  在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
 
"beforeend"  在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
 
"afterend"  在当前元素之后插入一个紧邻的同辈元素

 元素前面、后面插入指定内容，作为同辈元素
 
element.insertAdjacentHTML('beforebegin', '<p>hello</p>')
 
element.insertAdjacentHTML('afterend', '<p>hello</p>')
 
元素内前面、后面插入指定内容，作为子元素
 
element.insertAdjacentHTML('afterbegin', '<p>hello</p>')
 
element.insertAdjacentHTML('beforeend', '<p>hello</p>')

内存与性能问题

 被移除的元素之前有关联的事件处理或者其他js对象
之前的绑定关系会滞留在内存中
 
在使用 innerHTML、outerHTML 和 insertAdjacentHTML()之前
最好手动删除要 被替换的元素 上关联的 事件处理程序 和 JavaScript 对象

插入文本

innerText 属性

 可以设置文本节点，也可以获取元素的文本信息
 
element.innerText = '<p>hello</p>';
 
对应 outerText 属性，这个属性会导致调用它的元素不存在，尽量不要用

滚动

scrollIntoView()

 所有 HTML 元素都可以调用 scrollIntoView() 方法
 
通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中
 
当传入 true 或者不传入参，窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
 
当传入 false 调用元素会尽可能全部出现在视口中
 
调用元素的顶部与视口顶部尽可能平齐
 
div.scrollIntoView() 
div.scrollIntoView(true)
 
调用元素会尽可能全部出现在视口中，不过顶部不一定对齐
 
可能调用元素的底部会与视口顶部平齐
 
div.scrollIntoView(false)

scrollIntoViewIfNeed()

 scrollIntoViewIfNeed(true) =>  参数可选，把不可见元素可见

scrollByLines()

 scrollByLines(5) => 滚动到指定行

scrollByPages()

 scrollByPages(-1) =>  滚动指定页面高度，具体高度由元素的高度决定

posted @ 2023-04-05 22:37 caix-1987 阅读(222) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 第十一篇文档对象模型 - DOM

· 第十四篇事件 - 事件流、事件处理程序、事件委托（代理）

· JavaScript--DOM

· DOM(文档对象模型)+操作DOM

· DOM的用法和属性

	读模式下返回调用元素的所有子节点

	写模式下根据指定的值创建新的 DOM 树，替换所有子元素

	注意: 读模式得到子节点内容会被转义。为 innerHTML 设置的包含 html 的字符串值与解析后 innnerHTML 的值大不相同。

	div.innerHTML = '<p>dddd</p>';

	1、通过id号来获取元素，返回一个元素对象

	document.getElementById("idName")

	2、通过 name属性获取元素，返回元素对象数组 NodeList

	document.getElementsByName("name")

	3、通过class来获取元素，返回元素对象数组 NodeList

	document.getElementsByClassName("className")

	4、通过标签名获取元素，返回元素对象数组 NodeList

	document.getElementsByTagName("tagName")

	5、DOM 中的每个 HTML 元素也是一个节点，可以像这样查找节点

	通过 CSS 选择器（类名、Id、标签名）获取元素，H5 新增

	如果通过类名或 Id 方式获取，前面要加选择器符号 ‘.’ ‘#’

	document.querySelector('h1')

	document.querySelectorAll('h1')

	querySeleor: 返回指定选择器的第一个元素对象，如有多个只取第一个

	querySelorAll: 返回指定选择器的所有元素对象集合，NodeList

	let element = document.getElementById("idName")

	1、括号传入属性名，返回对应属性的属性值

	element.getAttribute("attributeName")

	2、传入属性名及设置的值给元素设置属性

	element.setAttribute("attributeName","attributeValue")

	let element = document.getElementById("idName")

	1、创建一个 html 元素，这里以创建 h3 元素为例

	document.createElement("h3")

	2、创建一个文本节点

	document.createTextNode("String")

	3、创建一个属性节点，这里以创建 class 属性为例

	element.createAttribute("class")

	let element = document.getElementById("idName")

	1、往 element 内部最后面添加一个节点，参数是节点类型

	element.appendChild(Node)

	2、在 element 内部中的 existingNode 前面插入 newNode

	element.insertBefore(newNode,existingNode)

	3、往 element 内部最后面添加插入 Node节点或字符串

	element.append(Node 或 "字符串" )

	append 可插入Node节点或字符串，但 appendChild 只能插入 Node 节点

	append 可传入多个参数但 appendChild 只接受一个参数

	parent.append(Node, Node, 'Hello world')

	let element = document.getElementById("idName")

	1、删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回 null

	element.removeChild(node)

	let element = document.getElementById("idName")

	返回当前元素的父节点对象

	element.parentNode

	let element = document.getElementById("idName")

	1、返回当前元素所有子元素节点对象，只返回 HTML 节点

	element.children

	2、返回当前元素所有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）

	element.childNodes

	3、返回当前元素的第一个子节点对象

	element.firstChild

	4、返回当前元素的最后一个子节点对象

	element.lastChild

	let element = document.getElementById("idName")

	1、返回当前元素的下一个同级元素没有就返回 null

	element.nextSibling

	2、返回当前元素上一个同级元素没有就返回 null

	element.previousSibling

	let element = document.getElementById("idName")

	1、返回元素的所有文本，包括 html 代码

	element.innerHTML

	2、返回当前元素的自身及子代所有文本值，只是文本内容，不包括 html 代码

	element.innerText

	let element = document.getElementById("idName")

	1、返回节点的类型,数字形式（1-12）

	常见几个 1：元素节点，2：属性节点，3：文本节点

	element.nodeType => 1

	let element = document.getElementById("idName")

	1、设置元素的样式时使用 style

	element.style.color = "#ffffff"

	获取 <body> 元素
	let body = document.querySelector("body")

	获取 ID 为 “myDiv” 的元素
	let myDiv = document.querySelector("#myDiv")

	获取类名为 “selected” 的第一个元素
	let selected = document.querySelector(".selected")

	取得 ID 为 "myDiv" 的 <div> 元素中的所有 <em> 元素
	let ems = document.getElementById("myDiv").querySelectorAll("em");

	let strongElements = document.querySelectorAll("p strong");

	以下 3 个循环的效果一样

	for (let strong of strongElements) {
	strong.className = "important";
	}

	for (let i = 0; i < strongElements.length; ++i) {
	strongElements.item(i).className = "important";
	}

	for (let i = 0; i < strongElements.length; ++i) {
	strongElements[i].className = "important";
	}

	if (document.body.matchSelector("body.page1")){
	do something
	}

	原来要这样写

	let parentElement = document.getElementById('parent');
	let currentChildNode = parentElement.firstChild;

	没有子元素，firstChild 返回 null，跳过循环

	while (currentChildNode) {
	if (currentChildNode.nodeType === 1) {

	如果有元素节点，则做相应处理

	processChild(currentChildNode);

	}
	if (currentChildNode === parentElement.lastChild) {
	break;
	}
	currentChildNode = currentChildNode.nextSibling;
	}

	使用了 Element Traversal 简化后

	let parentElement = document.getElementById('parent');
	let currentChildElement = parentElement.firstElementChild;

	没有子元素，firstElementChild 返回 null，跳过循环

	while (currentChildElement) {

	这就是元素节点，做相应处理

	processChild(currentChildElement);

	if (currentChildElement === parentElement.lastElementChild) {
	break;
	}
	currentChildElement = currentChildElement.nextElementSibling;
	}

	取得所有类名中包含 "username" 和 "current" 元素

	这两个类名的顺序无关紧要

	let allCurrentUsernames = document.getElementsByClassName("username current");

	取得 ID 为 "myDiv" 的元素子树中所有包含 "selected" 类的元素
	let selected = document.getElementById("myDiv").getElementsByClassName("selected");

	DOMTokenList 还增加了以下方法

	1、add(value) 向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做

	2、contains(value) 返回布尔值，表示给定的 value 是否存在

	调用 contains() 方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点

	3、remove(value) 从类名列表中删除指定的字符串值 value

	4、toggle(value) 如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。

	div.classList.remove("disabled"); => 删除"disabled"类

	div.classList.add("current"); => 添加"current"类

	for (let class of div.classList){ => 迭代类名
	doStuff(class);
	}

caix-1987 - 个人博客

不要被对象、属性、方法、框架等词汇所迷惑，学前端最根本的是要掌握最基础的知识 -- 万丈高楼平地起， 一砖一瓦皆根基 ...

第十二篇 DOM 操作 - 常用方法 和 常用属性