Element节点类型详整

时间:2019-11-28 05:41来源:亚洲城ca88唯一官方网站
DOM Element节点类型详细明白 2015/09/21 · HTML5 ·DOM 本文小编: 伯乐在线 -韩子迟。未经我许可,禁绝转发! 款待参加伯乐在线 专辑小编。 上文中大家讲课了 DOM中最要紧的节点类型之意气

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卡塔 尔(英语:State of Qatar)访谈本性时才用。如若给定称号的特色海市蜃楼,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实例对象卡塔 尔(英语:State of Qatar),包罗了有着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中,相似上边包车型客车款型:

打赏帮助本身写出越多好随笔,感谢!

图片 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

[ 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;

...

编辑:亚洲城ca88唯一官方网站 本文来源:Element节点类型详整

关键词: 亚洲城ca88