快捷搜索:  汽车  科技

htmldom元素怎么获得(HTML节点元素常用的DOM操作有哪些)

htmldom元素怎么获得(HTML节点元素常用的DOM操作有哪些)// 返回ID为'test'的节点: var test = document.getElementById('test'); // 先定位ID为'test-table'的节点,再返回其内部所有tr节点: var trs = document.getElementById('test-table').getElementsByTagName('tr'); // 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById('test-div').getElementsByClassName('red'); // 获取节点test下的所有直属子节点: var cs =

DOM结构

DOM 采用的是“树形结构”,用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。

<html> <head> <title><title> <meta charset="utf-8" /> </head> <body> <h1>C语言中文网</h1> <p>C语言中文网一个……</p> <p>C语言中文网成立于……</p> </body> </html>


对于上面这个 HTML 文档,DOM 将其解析为图 1 所示的树形结构。

htmldom元素怎么获得(HTML节点元素常用的DOM操作有哪些)(1)


图 1:DOM 树

于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:

  • 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
  • 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
  • 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
  • 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()。

由于ID在HTML文档中是唯一的,所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。

例如:

// 返回ID为'test'的节点: var test = document.getElementById('test'); // 先定位ID为'test-table'的节点,再返回其内部所有tr节点: var trs = document.getElementById('test-table').getElementsByTagName('tr'); // 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById('test-div').getElementsByClassName('red'); // 获取节点test下的所有直属子节点: var cs = test.children; // 获取节点test下第一个、最后一个子节点: var first = test.firstElementChild; var last = test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll(),需要了解selector语法,然后使用条件来获取节点,更加方便:

// 通过querySelector获取ID为q1的节点: var q1 = document.querySelector('#q1'); // 通过querySelectorAll获取q1节点内的符合条件的所有节点: var ps = q1.querySelectorAll('div.highlighted > p');

注意:低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲,我们这里的DOM节点是指Element,但是DOM节点实际上是Node,在HTML中,Node包括Element、Comment、CDATA_SECTION等很多种,以及根节点Document类型,但是,绝大多数时候我们只关心Element,也就是实际控制页面结构的Node,其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

练习

如下的HTML结构

<!-- HTML结构 --> <div id="test-div"> <div class="c-red"> <p id="test-p">JavaScript</p> <p>Java</p> </div> <div class="c-red c-green"> <p>Python</p> <p>Ruby</p> <p>Swift</p> </div> <div class="c-green"> <p>Scheme</p> <p>Haskell</p> </div> </div>

请选择出指定条件的节点:

'use strict';

// 测试: if (!js || js.innerText !== 'JavaScript') { alert('选择JavaScript失败!'); } else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') { console.log('选择Python Ruby Swift失败!'); } else if (!haskell || haskell.innerText !== 'Haskell') { console.log('选择Haskell失败!'); } else { console.log('测试通过!'); }DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口

它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容

任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构

节点分很多类型,每种类型对应着文档中不同的信息和(或)标记,也都有自己不同的特性、数据和方法,而且与其他类型有某种关系,如下所示:

<html> <head> <title>Page</title> </head> <body> <p>Hello World!</p > </body> </html>

DOM像原子包含着亚原子微粒那样,也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种:

<div> <p title="title"> content </p > </div>

上述结构中,div、p就是元素节点,content就是文本节点,title就是属性节点

操作

日常前端开发,我们都离不开DOM操作

在以前,我们使用Jquery,zepto等库来操作DOM,之后在vue,Angular,React等框架出现后,我们通过操作数据来控制DOM(绝大多数时候),越来越少的去直接操作DOM

但这并不代表原生操作不重要。相反,DOM操作才能有助于我们理解框架深层的内容

下面就来分析DOM常见的操作,主要分为:

  • 创建节点
  • 查询节点
  • 更新节点
  • 添加节点
  • 删除节点
创建节点

// 创建一个html元素,这里以创建h3元素为例 document.createElement("h3") // 创建一个文本节点; document.createTextNode(String); // 创建一个属性节点,这里以创建class属性为例 document.createAttribute("class");createElement

创建新元素,接受一个参数,即要创建元素的标签名

const divEl = document.createElement("div");createTextNode

创建一个文本节点

const textEl = document.createTextNode("content");createDocumentFragment

用来创建一个文档碎片,它表示一种轻量级的文档,主要是用来存储临时节点,然后把文档碎片的内容一次性添加到DOM中

const fragment = document.createDocumentFragment();

当请求把一个DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment自身,而是它的所有子孙节点

createAttribute

创建属性节点,可以是自定义属性

const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute);获取节点

获取节点

// 通过id号来获取元素,返回一个元素对象 document.getElementById(idName) // 通过name属性获取id号,返回元素对象数组 document.getElementsByName(name) // 通过class来获取元素,返回元素对象数组 document.getElementsByClassName(className) // 通过标签名获取元素,返回元素对象数组 document.getElementsByTagName(tagName) //不需要兼容IE document.querySelector('#idxxx') document.querySelectorAll('.red')[0] document.querySelectorAll('#idxxx')[0]querySelector

传入任何有效的css 选择器,即可选中单个 DOM元素(首个):

document.querySelector('.element') document.querySelector('#element') document.querySelector('div') document.querySelector('[name="username"]') document.querySelector('div p > span')

如果页面上没有指定的元素时,返回 null

querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表

const notLive = document.querySelectorAll("p");

需要注意的是,该方法返回的是一个 NodeList的静态实例,它是一个静态的“快照”,而非“实时”的查询

关于获取DOM元素的方法还有如下,就不一一述说

document.getElementById('id属性值');返回拥有指定id的对象的引用 document.getElementsByClassName('class属性值');返回拥有指定class的对象集合 document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合 document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合 document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素 document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素 document.documentElement; 获取页面中的HTML标签 document.body; 获取页面中的BODY标签 document.all['']; 获取页面中的所有元素节点的对象集合型

除此之外,每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性,关系图如下图所示

htmldom元素怎么获得(HTML节点元素常用的DOM操作有哪些)(2)

更新节点innerHTML

不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树

// 获取<p id="p">...</p > var p = document.getElementById('p'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="p">ABC</p > // 设置HTML: p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ'; // <p>...</p >的内部结构已修改 innerText、textContent

自动对字符串进行HTML编码,保证无法设置任何HTML标签

// 获取<p id="p-id">...</p > var p = document.getElementById('p-id'); // 设置文本: p.innerText = '<script>alert("Hi")</script>'; // HTML被自动编码,无法设置一个<script>节点: // <p id="p-id"><script>alert("Hi")</script></p >

两者的区别在于读取属性时,innerText不返回隐藏元素的文本,而textContent返回所有文本

style

DOM节点的style属性对应所有的CSS,可以直接获取或设置。遇到-需要转化为驼峰命名

// 获取<p id="p-id">...</p > const p = document.getElementById('p-id'); // 设置CSS: p.style.color = '#ff0000'; p.style.fontSize = '20px'; // 驼峰命名 p.style.paddingTop = '2em';添加节点

// 创建一个html元素,这里以创建h3元素为例 document.createElement("h3") // 创建一个文本节点; document.createTextNode(String); // 创建一个属性节点,这里以创建class属性为例 document.createAttribute("class"); // 往element内部最后面添加一个节点,参数是节点类型 element.appendChild(Node); // 在element内部的中在existingNode前面插入newNode elelment.insertBefore(newNode existingNode);

获取当前元素的同级元素

// 返回当前元素的下一个同级元素 没有就返回null element.nextSibling // 返回当前元素上一个同级元素 没有就返回 null element.previousSibling

获取当前元素的文本

// 返回元素的所有文本,包括html代码 element.innerHTML // 返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码 element.innerText

获取当前节点的节点类型

// 返回节点的类型 数字形式(1-12) // 常见几个1:元素节点,2:属性节点,3:文本节点。 node.nodeType

设置样式

// 设置元素的样式时使用style element.style.color=“#eea”;innerHTML

如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容,相当于添加了新的DOM节点

如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点

appendChild

把一个子节点添加到父节点的最后一个子节点

举个例子

<!-- HTML结构 --> <p id="js">JavaScript</p > <div id="list"> <p id="java">Java</p > <p id="python">Python</p > <p id="scheme">Scheme</p > </div>

添加一个p元素

const js = document.getElementById('js') js.innerHTML = "JavaScript" const list = document.getElementById('list'); list.appendChild(js);

现在HTML结构变成了下面

<!-- HTML结构 --> <div id="list"> <p id="java">Java</p > <p id="python">Python</p > <p id="scheme">Scheme</p > <p id="js">JavaScript</p > <!-- 添加元素 --> </div>

上述代码中,我们是获取DOM元素后再进行添加操作,这个js节点是已经存在当前文档树中,因此这个节点首先会从原先的位置删除,再插入到新的位置

如果动态添加新的节点,则先创建一个新的节点,然后插入到指定的位置

const list = document.getElementById('list') const haskell = document.createElement('p'); haskell.id = 'haskell'; haskell.innerText = 'Haskell'; list.appendChild(haskell);insertBefore

把子节点插入到指定的位置,使用方法如下:

parentElement.insertBefore(newElement referenceElement)

子节点会插入到referenceElement之前

setAttribute

// 括号传入属性名,返回对应属性的属性值 element.getAttribute(attributeName) // 传入属性名及设置的值 element.setAttribute(attributeName attributeValue)

在指定元素中添加一个属性节点,如果元素中已有该属性改变属性值

const div = document.getElementById('id') div.setAttribute('class' 'white');//第一个参数属性名,第二个参数属性值。 删除节点

删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉

// 拿到待删除节点: const self = document.getElementById('to-be-removed'); // 拿到父节点: const parent = self.parentElement; // 删除: const removed = parent.removeChild(self); removed === self; // true

删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置

给大家分享我收集整理的各种学习资料,前端小白交学习流程,入门教程等回答-下面是学习资料参考。

前端学习交流、自学、学习资料等推荐 - 知乎

猜您喜欢: