>

Element节点类型详细解释必发88官网

- 编辑:www.bifa688.com -

Element节点类型详细解释必发88官网

DOM Element节点类型精解

2015/09/21 · HTML5 · DOM

本文笔者: 伯乐在线 - 韩子迟 。未经笔者许可,制止转发!
招待参与伯乐在线 专辑小编。

上文中大家讲课了 DOM 中最注重的节点类型之风度翩翩的 Document 节点类型,本文我们后续深远,谈谈另贰个重要的节点类型 Element 。

1.dom对象的innerText和innerHTML有哪些差异?

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

DOM元素的attribute和property比较轻易混倄在一块儿,分不清楚,两者是分化的事物,不过两岸又联系紧凑。非常多生手朋友,也席卷早前的笔者,常常会搞不清楚。

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类型

attribute翻译成汉语术语为“性格”,property翻译成汉语术语为“属性”,从粤语的字面意思来看,确实是有一点点分别了,先来讲说attribute。

2、HTML 元素


不无 HTML 元素都由 HTMLElement 类型表示,不是一贯通过这么些类型,也是透过它的子类型来代表。 HTMLElement 类型直接接轨自 Element 并加多了有的性质。各类 HTML 成分中都存在下列标准属性:

  1. id 成分在文档中的唯风姿洒脱标记符
  2. title 有关因素的增大表明音讯,常常经过工具提醒条突显出来
  3. lang 成分内容的语言代码,少之甚少使用
  4. dir 语言的趋向,值为 ltr 或者 rtl,也相当少使用
  5. className 与成分的 class 特性对应

3.查询成分有三种平淡无奇的艺术?ES5的成分选拔方式是怎么样?

attribute是三个表征节点,各样DOM成分都有一个对应的attributes属性来寄放全体的attribute节点,attributes是多个类数组的容器,说得准确点正是NameNodeMap,简单的说就是一个临近数组但又和数组不太相仿的器皿。attributes的种种数字索引以名值对(name=”value”)的款式寄存了八个attribute节点。

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卡塔尔国。唯有在得到自定义天性值的意况下,才使用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对象,富含全体相称给定选取器的节点。

<div class="box" id="box" gameid="880">hello</div>

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>```

地点的div成分的HTML代码中有class、id还应该有自定义的gameid,那一个特征都贮存在attributes中,相似上面包车型大巴花样:

打赏补助作者写出更加多好文章,多谢!

必发88官网 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>

复制代码 代码如下:

至于小编:韩子迟

必发88官网 2

a JavaScript beginner 个人主页 · 小编的作品 · 9 ·    

必发88官网 3

[ class="box", id="box", gameid="880" ]

能够如此来做客attribute节点:

复制代码 代码如下:

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

可是IE6-7将许多东西都寄放在attributes中,上面包车型地铁拜望方法和正规浏览器的归来结果又分裂。平时要得到三个attribute节点直接用getAttribute方法:

复制代码 代码如下:

console.log( elem.getAttribute('gameid') ); // 880

要设置一个attribute节点使用setAttribute方法,要刨除就用removeAttribute:

复制代码 代码如下:

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

attributes是会趁机拉长或删除attribute节点动态更新的。
property就是三个性子,假诺把DOM成分看成是多少个平日的Object对象,那么property便是三个以名值对(name=”value”)的情势寄放在Object中的属性。要丰裕和删除property也简单多了,和平凡的对象没啥分别:

复制代码 代码如下:

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

为此attribute和property轻巧混倄在一块儿的案由是,超多attribute节点还应该有三个相呼应的property属性,举例上面的div成分的id和class既是attribute,也可能有照管的property,不管选用哪类方法都足以访谈和改造。

复制代码 代码如下:

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

唯独对于自定义的attribute节点,或许自定义property,两个就从未涉及了。

复制代码 代码如下:

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

对于IE6-7来说,未有分别attribute和property:

复制代码 代码如下:

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

好多新手朋友预计都十分轻巧掉进那几个坑中。
DOM成分一些暗中同意常见的attribute节点都有与之相应的property属性,相比较非常的是有些值为Boolean类型的property,如有些表单成分:

复制代码 代码如下:

<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

对于这么些优异的attribute节点,独有存在该节点,对应的property的值就为true,如:

复制代码 代码如下:

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

末段为了更好的区分attribute和property,基本得以总括为attribute节点都以在HTML代码中可以看到的,而property只是一个平日的名值对质量。

复制代码 代码如下:

// gameid和id都是attribute节点
// id同期又能够因此property来访谈和改革
<div gameid="880" id="box">hello</div>
// areaid仅仅是property
elem.areaid = 900;

...

本文由必发88官网发布,转载请注明来源:Element节点类型详细解释必发88官网