>

Element节点类型详整

- 编辑:正版管家婆马报彩图 -

Element节点类型详整

DOM Element节点类型详整

2015/09/21 · HTML5 · DOM

正文我: 伯乐在线 - 韩子迟 。未经小编许可,防止转发!
款待参预伯乐在线 专辑小编。

上文中我们讲课了 DOM 中最重大的节点类型之生龙活虎的 Document 节点类型,本文大家后续深远,谈谈另四个要害的节点类型 Element 。

1.dom目的的innerText和innerHTML有如何差别?

  • innerText:文本格式插入
  • innerHTML:支持HTML插入,解析HTML标签

1、概况


Element 类型用于表现 HTML 或 XML 成分,提供了对成分标签字、子节点及特点的拜候。 Element 节点有所以下特点:

  1. nodeType 的值为 1
  2. nodeName 的值为元素的标签字
  3. nodeValue 的值为null
  4. parentNode 可能是 Document 或者 Element
  5. 其子节点大概是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

要访谈元素的标签名,能够用 nodeName 属性,也能够用 tagName 属性;那八个属性会重返相像的值。在 HTML 中,标具名始终都是一切大写表示,而在 XML(有的时候候也席卷 XHTML卡塔 尔(阿拉伯语:قطر‎中,标具名始终和源代码中保持生龙活虎致。大器晚成经你不明显本人的台本将会在 HTML 依然 XML 文书档案中执行,最棒照旧在可比前边将标签名转变到相近的高低写形式:

JavaScript

var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 那样最佳,适用于其它文书档案 // ... }

1
2
3
4
5
6
7
var myDiv = document.querySelector('div');
console.log(myDiv.tagName);  // DIV
console.log(myDiv.nodeName);  // DIV
 
if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
  // ...
}

2.elem.children和elem.childNodes的区别?

  • element.children 获取的是时下元素的兼具子节点成分(不饱含文件成分卡塔 尔(阿拉伯语:قطر‎,children重回的是HTMLCollection类型
  • element.childNodes 获取的是现阶段因素的有所子元素(节点成分和文书成分),childNodes重返的是NodeList类型

2、HTML 元素


不无 HTML 成分都由 HTMLElement 类型表示,不是一向通过那几个体系,也是由此它的子类型来代表。 HTMLElement 类型直接接轨自 Element 并增多了有个别本性。各类 HTML 成分中都留存下列标准属性:

  1. id 成分在文书档案中的唯意气风发标志符
  2. title 有关因素的增大表达音讯,经常经过工具提醒条展现出来
  3. lang 成分内容的语言代码,相当少使用
  4. dir 语言的方向,值为 ltr 或者 rtl,也比少之又少使用
  5. className 与成分的 class 性格对应

3.询问成分有两种广泛的措施?ES5的成分接受情势是怎么着?

3、性子的收获和装置


各类成分都有一个或七个特性,这一个特征的用场是付出相应成分或其剧情的增大消息。操作性情的 DOM 方法首要有四个,分别是getAttribute() setAttribute() removeAttribute()

注意,传递给 getAttribute() 的特色名与实际的风味名相通,因而要想获得 class 个性值,应该传入 class 而不是 className,前者唯有在经过对象属性(property卡塔 尔(阿拉伯语:قطر‎访谈性情时才用。要是给定称号的特色空头支票,getAttribute() 返回 null。

<div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id='myDiv' title='hanzichi'> </div>
<script>
  var myDiv = document.querySelector('div');
 
  // attribute
  console.log(myDiv.getAttribute('id')); // myDiv
  console.log(myDiv.getAttribute('class')); // null
  console.log(myDiv.getAttribute('title')); // hanzichi
  console.log(myDiv.getAttribute('lang')); // null
  console.log(myDiv.getAttribute('dir')); // null
 
  // property
  console.log(myDiv.id); // myDiv
  console.log(myDiv.className); // ''
  console.log(myDiv.title); // hanzichi
  console.log(myDiv.lang); // ''
  console.log(myDiv.dir); // ''
</script>

由此 getAttribute() 方法也能够赢得自定义脾气。

在骨子里开荒中,开垦职员临时用 getAttribute(),而是只行使对象的品质(property卡塔 尔(英语:State of Qatar)。独有在拿到自定义本性值的处境下,才使用getAttribute() 方法。为啥吗?比方说 style,在通过 getAttribute() 访问时,返回的 style 天性值包罗的是 css 文本,而通过属性来访问会回来贰个对象。再例如 onclick 那样的事件管理程序,当在要素上接受时,onclick 天性包括的是 Javascript 代码,要是经过 getAttribute() 访谈,将会回去相应代码的字符串,而在拜见 onclick 属性时,则会回到 Javascript 函数。

与 getAttribute() 对应的是 setAttribute(),那一个主意接收四个参数:要设置的特色名和值。假诺个性已经存在,setAttribute()会以钦定的值替换现存的值;假如本性不设有,setAttribute() 则创立该属性并安装相应的值。

而 removeAttitude() 方法用于通透到底删除成分的风味。调用这几个主意不但会免去本性的值,并且也会从要素中完全除去天性。

JavaScript

div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

1
2
3
4
div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text');
 
div.removeAttribute('class')

document方法:

  • document.getElementById()
    getElementById方法再次回到相称钦命id属性的成分节点。若无意识相称的节点,则赶回null。
    其大器晚成措施只好在document对象上利用,不能在别的因三秋点上运用。
  • document.getElementsByTagName()
    document.getElementsByTagName方法重临全体内定HTML标签的因素,重返值是一个像样数组的HTMLCollection对象,能够实时反映HTML文书档案的变迁。如果未有其余相称的成分,就回来叁个空集。不只能够在document对象上调用,也足以在任何因白藏点上调用。
  • docuemnt.getElementsByClassName()
    document.getElementsByClassName方法再次回到二个周围数组的目的(HTMLCollection实例对象卡塔尔国,满含了独具class名字符合钦命条件的要素,成分的变化实时反映在回到结果中。不仅能在document对象上调用,也足以在别的因穷秋点上调用。
  • document.getElementsByName()
    document.getElementsByName方法用于采纳具有name属性的HTML成分(比方<form>、<radio>、<img>、<frame>、<embed>和<object>等卡塔尔,再次回到二个相像数组的的靶子(NodeList对象的实例卡塔 尔(阿拉伯语:قطر‎,因为name属性雷同的因素大概持续二个。
  • document.elementFromPoint
    document.elementFromPoint方法重返位于页面钦赐地方最上层的Element子节点。

4、attributes 属性


Element 类型是利用 attributes 属性的必定要经过的道路二个 DOM 节点类型。 attributes 属性中隐含三个 NamedNodeMap,与 NodeList 相近,也是叁个“动态”的联谊。成分的每四个特色都由七个 Attr 节点表示,每种节点都保留在 NamedNodeMap 对象中。NamedNodeMap 对象具有下列方法:

  1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
  2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
  3. setNamedItem(node): 向列表中增多节点,以节点的 nodeName 属性为索引
  4. item(pos): 重临位于数字 pos 地方处的节点

attributes 属性中包蕴大器晚成俯拾都已的节点,各个节点的 nodeName 正是特点的名号,而节点的 nodeValue 就是特点的值。

JavaScript

// 获得成分的表征值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能完毕平等功能var id = element.getAttribute('id'); // 与removeAttribute() 方法比较,唯风流倜傥的界别是能重临表示被删除天性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 增多新特性 // 供给传入三个特色节点 element.attributes.setNamedItem(newAttr);

1
2
3
4
5
6
7
8
9
10
11
12
13
// 取得元素的特性值
var id = element.attributes.getNamedItem('id').nodeValue;
var id = element.attributes['id'].nodeValue;
 
// getAttribute() 也能实现一样功能
var id = element.getAttribute('id');
 
// 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
var oldAttr = element.attributes.removeNamedItem('id');
 
// 添加新特性
// 需要传入一个特性节点
element.attributes.setNamedItem(newAttr);

诚如的话,由于后面介绍的 attributes 方法相当不够方便,因而开采人士愈来愈多的会选取 getAttribute() removeAttribute() 以及setAttribute() 方法。

只是只要想要遍历成分的天性,attributes 属性倒是可以派上用项:

<div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i++) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='myDiv' title='hanzichi' class='fish'> </div>
<script>
  var myDiv = document.querySelector('div');
  for (var i = 0, len = myDiv.attributes.length; i < len; i++) {
    var attrName = myDiv.attributes[i].nodeName
      , attrValue = myDiv.attributes[i].nodeValue;
 
    console.log(attrName, attrValue);
  }
 
  // id myDiv
  // title hanzichi
  // class fish
</script>

ES5的方法:

  • document.querySelector()
    document.querySelector方法采取多个CSS选用器作为参数,重返相称该选取器的成分节点。若是有两个节点满意相称原则,则赶回第一个非常的节点。若无发觉相配的节点,则赶回null
  • document.querySelectorAll()
    document.querySelectorAll方法与querySelector用法类似,差距是回去三个NodeList对象,包括全体相称给定接收器的节点。

5、元素的子节点


<ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 其余浏览器: 7 </script>

1
2
3
4
5
6
7
8
9
10
<ul id='myUl'>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>
 
<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
</script>

上述代码,倘诺是 IE 来剖判,那么 <ul> 成分会有 3 个子节点,分别是 3 个 <li> 成分;而只就算此外浏览器分析,则会有 7 个子节点,富含 3 个 <li> 成分 和 4 个文件节点。

假使像下边那样将元素之间的空白符删除,那么全部浏览器都会回去相通数量的子节点:

<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 全部浏览器: 3 </script>

1
2
3
4
5
6
<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
 
<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // 所有浏览器: 3
</script>

 

打赏帮忙本身写出越来越多好文章,多谢!

打赏作者

4.怎样创造贰个成分?怎么着给成分设置属性?怎么着删除属性

  • document.createElement()
    document.createElement方法用来生成网页元素秋点。
var newDiv = document.createElement('div');```
createElement方法的参数为元素的标签名,即元素节点的tagName属性,对于 HTML 网页大小写不敏感,即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号(即<和>)会报错。

<body>
<div id="div1" class='test'>ss</div>
<script charset="utf-8">
var body = document.getElementsByTagName('body')//获取节点
var newDiv = document.createElement('div')//创设成分
newDiv.setAttribute('id','xxx')//设置属性
var newContent = document.createTextNode('hello world') //创造文本节点
body[0].appendChild(newDiv)//插入节点
newDiv.appendChild(newContent) //插入文本节点
document.getElementById('div1').removeAttribute('class')//删除属性
</script>
</body>```

打赏扶持作者写出更加的多好小说,多谢!

图片 1

1 赞 1 收藏 评论

5.怎么给页面成分加多子成分?怎么着删除页面成分下的子元素?

<body>
      <div id="div1" class='test'>div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>
      <div id="div4">div4</div>
      <div id="div5">div5</div>
      <script charset="utf-8">
        var body = document.getElementsByTagName('body')
        var newDiv = document.createElement('div')
        newDiv.setAttribute('id','xxx')
        var newContent = document.createTextNode('hello world') 
        body[0].appendChild(newDiv)//页面元素添加子元素
        newDiv.appendChild(newContent)     
        document.getElementById('div1').removeAttribute('id')
        body[0].removeChild(document.getElementById('div4'))//删除页面元素下的子元素
        document.getElementById('div2').remove()//删除元素本身
      </script>
    </body>```
# 6.element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
- className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割。
- classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。
#### classList对象有下列方法。

>add():增加一个class。
remove():移除一个class。
contains():检查当前元素是否包含某个class。
toggle():将某个class移入或移出当前元素。
item():返回指定索引位置的class。
toString():将class的列表转为字符串。

myDiv.classList.add('myCssClass');//加多三个class
myDiv.classList.add('foo', 'bar');//增加七个class
myDiv.classList.remove('myCssClass');//删除一个class
myDiv.classList.toggle('myCssClass'); // 若是myCssClass不设有就进入,存在就移除
myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
myDiv.classList.item(0); // 再次来到第二个Class
myDiv.classList.toString();//将classList对象转变为字符串与.className效果相像

# 7.如何选中如下代码所有的li元素? 如何选中btn元素?

<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
<script>
var liAll = document.getElementsByTagName('li')//选中享有li成分生产类数组对象
var btn = document.getElementsByClassName('btn')//选中btn元素
</script>

有关我:韩子迟

图片 2

a JavaScript beginner 个人主页 · 作者的稿子 · 9 ·    

图片 3

本文由web前端发布,转载请注明来源:Element节点类型详整