技术文章
当前位置:首页 > Javascript技术文章 > 老生常谈javascript DOM节点获取

javascript DOM节点获取方法代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:168

这篇文章主要知识点是关于js、获取dom节点、JavaScript操作HTML DOM节点的基础教程 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript核心技术开发解密
  • 类型:JavaScript大小:68.4 MB格式:PDF出版:电子工业出版社作者:阳波
立即下载
你不知道的JavaScript(上卷)
  • 类型:JS大小:8.4 MB格式:PDF出版:人民邮电出版社作者:普森
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

老生常谈javascript DOM节点获取

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

getElementById()

obj.getElementById(id) 该方法接收一个参数(该元素的id),若找到则返回该元素对象,若不存在则返回null;

任何HTML元素可以有一个 id 属性,在文档中该值必须唯一;

若浏览器中出现多个 id 名的情况,CSS样式对所有该 id 名的元素都生效,但 javascript 脚本仅对第一个出现该 id 名的元素生效;

getElementsByTagName()

obj.getElementsByTagName(tagName) 方法接收一个参数,即要取得元素的标签名,而返回的是包含0或多个元素的类数组对象 HTMLCollection。可以使用方括号语法或 item() 方法来访问类数组对象中的项,length 属性表示对象中元素的数量;

getElementsByName()

obj.getElementsByName(name) 方法会返回带有给定 name 特性的所有元素;

IE9及以下浏览器只支持在表单元素上使用 getElementsByName() 方法;

IE9及以下浏览器中使用 getElementsByName() 方法也会返回id属性匹配的元素。因此,不要将 name 和 id 属性设置为相同的值;
 

getElementsByClassName()

HTML5 新增了 getElementsByClassName() 方法;

在 javascript 中 class 是保留字,所以使用 className 属性来保存 HTML 的 class 属性值;

obj.getElementsByClassName(classaName) 方法接收一个参数,是包含一个或多个类名的字符串,返回带有指定类的所有元素的类数组对象 HTMLCollection。传入多个类名时,类名的先后顺序不重要。与 getElementsByTagName() 类似,该方法既可以用于 HTML 文档对象 document,也可以用于 element 元素对象;

IE8及以下浏览器不支持 getElementsByClassName();

在操作 class 类名时,需要通过 className 属性添加、删除和替换类名。因为 className 是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。要从 className 字符串中删除一个类名,需要把类名拆开,删除不想要的那个,再重新拼成一个新字符串;

classList

HTML5 为所有元素添加了 classList 属性,这个 classList 属性是新集合类型 DOMTokenList 的实例,它有一个表示自己包含多少元素的 length 属性,而要取得每个元素可以使用 item() 方法,也可以使用方括号法;

IE9及以下浏览器不支持 classList 属性;

classList 还有以下4个方法,我们主要用这些方法操作类名,有了 classList 属性,className属性基本没有什么用武之地了:

obj.classList.add(value); 将给定的字符串值添加到列表中,没有返回值,如果值已存在,则不添加;

obj.classList.contains(value); 表示列表中是否存在给定的值,如果存在则返回true,否则返回false;

obj.classList.remove(value); 从列表中删除给定的字符串,没有返回值;

obj.classList.toggle(value); 如果列表中已经存在给定的值,删除它并返回false;如果列表中没有给定的值,添加它并且返回true;

<div class="test abc"></div>
  <script>
   var oTest = document.getElementsByClassName('test')[0];
   var oTestAbc = document.getElementsByClassName('test abc')[0];
   var oAbc = document.getElementsByClassName('abc')[0];
   console.log(oTest === oTestAbc);//true
   console.log(oAbc === oTestAbc);//true
   console.log(oAbc === oTest);//true
   
   console.log(oTest.classList);//["test", "abc", value: "test abc"] 
   console.log(oTest.classList[0]);//"test" 
   console.log(typeof oTest.classList[0]);//"string" 
   console.log(oTest.classList.item(0));//"test" 
   
   //add()将给定的字符串值添加到列表中,没有返回值,如果值已存在,则不添加;
   oTest.classList.add('def');
   console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
   
   //contains()表示列表中是否存在给定的值,如果存在则返回true,否则返回false;
   console.log(oTest.classList.contains('def'));//true
   console.log(oTest.classList.contains('abcde'));//false
   
   //remove()从列表中删除给定的字符串,没有返回值;
   oTest.classList.remove('abc');
   console.log(oTest.classList);//["test", "def", value: "test def"]
   
   //toggle()如果列表中已经存在给定的值,删除它并返回false;如果列表中没有给定的值,添加它并且返回true;
   console.log(oTest.classList.toggle('hello'));//true
   console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
   console.log(oTest.classList.toggle('test'));//false
   console.log(oTest.classList);//["def", "hello", value: "def hello"]
  </script>

选择器API

HTML5 拓展了 querySelector()、querySelectorAll() 和 matchesSelector() 这3种方法,通过 CSS选择器 查询DOM文档取得元素的引用的功能变成了原生的API,解析和树查询操作在浏览器内部通过编译后的代码来完成,极大地改善了性能。

obj.querySelector(selector) 方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。该方法既可用于文档 document 类型,也可用于元素element 类型。IE7及以下不支持。

obj.querySelectorAll(selector) 接收一个CSS选择符,返回一个类数组对象,如果没有匹配元素,返回空的类数组对象,而不是null;IE7及以下不支持;

obj.matchesSelector(selector) 方法接收一个CSS选择符参数,如果调用元素与该选择符相匹配,返回true;否则返回false;

obj.matchesSelector(selector) 有兼容性问题,IE9+浏览器支持 msMatchesSelector() 方法,firefox 支持 mozMatchesSelector() 方法,safari 和 chrome 支持webkitMatchesSelector() 方法。

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiNo1 = oWrapper.querySelector('.no1');
   //obj.querySelector(selector) 方法接收一个CSS选择符,返回与该模式匹配的第一个元素,
   var oLiFirst = oWrapper.querySelector('li');
   var oFirstLi = oWrapper.querySelector('ul > li');
   console.log(oLiNo1 === oLiFirst);//true
   console.log(oLiNo1 === oFirstLi);//true
   console.log(oLiFirst === oFirstLi);//true
   console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//第一行 第一行 第一行
   
   //obj.querySelectorAll(selector) 接收一个CSS选择符,返回一个类数组对象
   var oWrapperAll = document.querySelectorAll('#wrapper');
   console.log(oWrapperAll);//[div#wrapper]
   console.log(oWrapperAll[0] === oWrapper);//true
   
   var oWrapperArray = oWrapperAll[0];
   var oLiFirstAll = oWrapperArray.querySelectorAll('li');
   var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
   console.log(oLiFirstArrayNo1 === oLiNo1);//true
   console.log(oLiFirstAll[1].innerHTML);//第二行
   
//   console.log(oWrapperArray.matchesSelector('#wrapper'));
   //TypeError: oWrapperArray.matchesSelector is not a function
   
   console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
   //obj.matchesSelector(selector) 有兼容性问题,
   //IE9+浏览器支持 msMatchesSelector() 方法,
   //firefox 支持 mozMatchesSelector() 方法,
   //safari 和 chrome 支持webkitMatchesSelector() 方法。
  </script>

选择器API使用时,需要注意的是:

querySelectorAll() 方法得到的类数组对象是非动态实时的,所以如果要计算长度等的实事值,最好重新获取;当然以前的 getElementById() 之类的就没这个毛病;

selector 类方法在元素上调用时,指定的选择器仍然在整个文档中进行匹配,然后过滤出结果集,以便它只包含指定元素的后代元素。这看起来是违反常规的,因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素;所以如果出现后代选择器,为了防止该问题,可以在参数中显式地添加当前元素的选择器;

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiLast = oUl.querySelector('li:last-of-type');
   var oLiAll = oUl.querySelectorAll('ul > li');
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   
   var newLi = document.createElement('li');
   newLi.innerHTML = '新加的Li,放到最后面';
   oUl.appendChild(newLi);
   //querySelectorAll() 方法得到的类数组对象是非动态实时的;
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li,放到最后面
   console.log(oUl.querySelectorAll('ul > li').length);//6
  </script>
  
  
  
  <div class="wrapper">
   <div class="test1"></div>
   <div class="test2"></div>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('.wrapper');
   //selector 类方法在元素上调用时,指定的选择器仍然在整个文档中进行匹配,然后过滤出结果集,以便它只包含指定元素的后代元素。
   //这看起来是违反常规的,因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素
   console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
   //这句代码我的理解是获取oWrapper内部子孙元素中,div里嵌套的div,这里没有这种情况,所以应该弹出一个空数组
   
   //如果出现后代选择器,为了防止该问题,可以在参数中显式地添加当前元素的选择器
   console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
   console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
  </script>

以上这篇老生常谈jacascript DOM节点获取就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

JavaScript操作HTML DOM节点的基础教程

因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。
NOTE:下面提供的例子中的 element 均为元素节点。
获取节点

父子关系

element.parentNode
element.firstChild/element.lastChild
element.childNodes/element.children

兄弟关系

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。

通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
 <ul id="ul">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
 <li>Fourth</li>
 </ul>
 <p>Hello</p>
 <script type="text/javascript">
 var ulNode = document.getElementsByTagName("ul")[0];
 console.log(ulNode.parentNode);    //<body></body>
 console.log(ulNode.previousElementSibling); //null
 console.log(ulNode.nextElementSibling);  //<p>Hello</p>
 console.log(ulNode.firstElementChild);  //<li>First</li>
 console.log(ulNode.lastElementChild);  //<li>Fourth</li>
 </script>
</body>
</html>

NTOE:细心的人会发现,在节点遍历的例子中,body、ul、li、p节点之间是没有空格的,因为如果有空格,那么空格就会被当做一个TEXT节点,从而用ulNode.previousSibling获取到得就是一个空的文本节点,而不是 <li>First</li> 节点了。即节点遍历的几个属性会得到所有的节点类型,而元素遍历只会得到相对应的元素节点。一般情况下,用得比较多得还是元素节点的遍历属性。
实现浏览器兼容版的element.children
有一些低版本的浏览器并不支持 element.children 方法,但我们可以用下面的方式来实现兼容。

<html lang>
<head>
 <meta charest="utf-8">
 <title>Compatible Children Method</title>
</head>
<body id="body">
 <div id="item">
 <div>123</div>
 <p>ppp</p>
 <h1>h1</h1>
 </div>
 <script type="text/javascript">
 function getElementChildren(e){
  if(e.children){
  return e.children;
  }else{
  /* compatible other browse */
  var i, len, children = [];
  var child = element.firstChild;
  if(child != element.lastChild){
   while(child != null){
   if(child.nodeType == 1){
    children.push(child);
   }
   child = child.nextSibling;
   }
  }else{
   children.push(child);
  }
  return children;
  }
 }
 /* Test method getElementChildren(e) */
 var item = document.getElementById("item");
 var children = getElementChildren(item);
 for(var i =0; i < children.length; i++){
  alert(children[i]);
 }
 </script>
</body>
</html>

NOTE:此兼容方法为初稿,还未进行兼容性测试。
接口获取元素节点

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

JavaScript操作HTML DOM节点的基础教程

getElementById

获取文档中指定 id 的节点对象。

var element = document.getElementById('id');
getElementsByTagName

动态的获取具有指定标签元素节点的集合(其返回值会被 DOM 的变化所影响,其值会发生变化)。此接口可直接通过元素而获取,不必直接作用于 document 之上。

// 示例
var collection = element.getElementsByTagName('tagName');

// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');

// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];


getElementsByClassName
获取指定元素中具有指定 class 的所有节点。多个 class 可的选择可使用空格分隔,与顺序无关。
var elements = element.getElementsByClassName('className');
NOTE:IE9 及一下版本不支持 getElementsByClassName
兼容方法

function getElementsByClassName(root, className) {
 // 特性侦测
 if (root.getElementsByClassName) {
 // 优先使用 W3C 规范接口
 return root.getElementsByClassName(className);
 } else {
 // 获取所有后代节点
 var elements = root.getElementsByTagName('*');
 var result = [];
 var element = null;
 var classNameStr = null;
 var flag = null;

 className = className.split(' ');

 // 选择包含 class 的元素
 for (var i = 0, element; element = elements[i]; i++) {
  classNameStr = ' ' + element.getAttribute('class') + ' ';
  flag = true;
  for (var j = 0, name; name = className[j]; j++) {
  if (classNameStr.indexOf(' ' + name + ' ') === -1) {
   flag = false;
   break;
  }
  }
  if (flag) {
  result.push(element);
  }
 }
 return result;
 }
}

querySelector / querySelectorAll

获取一个 list (其返回结果不会被之后 DOM 的修改所影响,获取后不会再变化)符合传入的 CSS 选择器的第一个元素或全部元素。

var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');

var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');

NOTE: IE9 一下不支持 querySelector 与 querySelectorAll
创建节点

创建节点 -> 设置属性 -> 插入节点

var element = document.createElement('tagName');

修改节点

textContent
获取或设置节点以及其后代节点的文本内容(对于节点中的所有文本内容)。

element.textContent; // 获取
element.textContent = 'New Content';

NOTE:不支持 IE 9 及其一下版本。
innerText (不符合 W3C 规范)
获取或设置节点以及节点后代的文本内容。其作用于 textContent 几乎一致。

element.innerText;

NOTE:不符合 W3C 规范,不支持 FireFox 浏览器。
FireFox 兼容方案

if (!('innerText' in document.body)) {
 HTMLElement.prototype.__defineGetter__('innerText', function(){
 return this.textContent;
 });
 HTMLElement.prototype.__defineSetter__('innerText', function(s) {
 return this.textContent = s;
 });
}

插入节点

appendChild

在指定的元素内追加一个元素节点。

var aChild = element.appendChild(aChild);

insertBefore

在指定元素的指定节点前插入指定的元素。

var aChild = element.insertBefore(aChild, referenceChild);

删除节点

删除指定的节点的子元素节点。

var child = element.removeChild(child);

innerHTML

获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点(去除之前添加的事件和样式)。innerHTML 不检查内容,直接运行并替换原先的内容。
NOTE:只建议在创建全新的节点时使用。不可在用户可控的情况下使用。

var elementsHTML = element.innerHTML;

存在的问题+

  • 低版本 IE 存在内存泄露
  • 安全问题(用户可以在名称中运行脚本代码)

PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点,

//由于这两种方法操作的都是某个节点的子节点,所以必须现取得父节点,代码中 someNode 表示父节点 
//使用appendChild()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true 
 
//使用insertBefore()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true 

 值得注意的是,如果这两种方法插入的节点原本已经存在与文档树中,那么该节点将会被移动到新的位置,而不是被复制。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 //var tt = a.cloneNode(true); 
 t.appendChild(a); 
</script> 

在这段代码中,页面输出的结果和没有Javascript时是一样的,元素并没有被复制,由于元素本来就在最后一个位置,所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置,就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个,然后添加到文档中,那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方,而不影响被复制的元素。下面使用了cloneNode()方法,实现节点的深度复制,使用这种方法复制的节点会脱离文档流。当然,我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 var tt = a.cloneNode(true); 
 t.appendChild(tt); 
</script> 

相似的操作方法还有 removeNode(node)删除一个节点,并返回该节;replaceNode(newNode,node)替换node节点,并返回该节点。这两种方法相对来说更容易使用一些。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到webpack 2的react开发配置详解、 js实现方块上下左右移动效、 javascript的写法总结、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS正则验证多个邮箱完整的代码实例

下一篇:js canvas如何实现图片放大镜功能

展开 +

收起 -

相关电子书
学习笔记
网友NO.495892

实现JavaScript的组成----BOM和DOM详解

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中。 window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网页中定义的任何一个对象,变量和函数,都已window作为其Global对象,因此有权访问paresinInt()等方法。(摘自高程三)。此外,如果一个网页中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中(索引0开始,ltr,ttb)。 首先,全局执行环境中的变量,函数都是window对象的属型和方法。当然,全局变量与直接定义的window属型有一……

网友NO.676196

原生JavaScript来实现对dom元素class的操作方法(推荐)

jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在 下面为一toggleClass的测试例子 [html] view plain copystyle type="text/css" div.testClass{ background-color:gray; } /style script type="text/javascript" function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } function toggleClass(obj,cls){ if(hasClass(obj,cls)){ removeClass(obj, cls); }else{ addClass(obj, cls); } } function toggleClassTest(){ var obj = document. getElementById('test'); tog……

网友NO.937354

JavaScript学习笔记之DOM基础操作实例小结

本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考,具体如下: 一、子节点 1、元素节点、文本节点 实例01 html body ulid="ul1"文本节点1 li/li文本节点2li/li文本节点3li/li文本节点4li/li文本节点5li/li文本节点6/ul!--文本节点adsasda--!--span元素节点 qeqweq/span--/body javascript script window.onload=function(){ varoUl=document.getElementById('ul1'); alert(oUl.childNodes.length); };/script 2、nodeType属性 常见节点 nodeType值 元素节点 1 属性节点 2 文本节点 3 实例02 script window.onload=function(){ varoUl=document.getElementById('ul1'); for(vari=0;ioUl.childNodes.length;i++){ if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red'; } } };/script 3、children获取元素节点 实例03 html代码 ulid="ul1" li !--子节点只算第一层的,在这里span是li的子节点,而不是ul的子节点-- span子节点/span /li li/li/ul javascript代码 script window.onload=fun……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息