hg888皇冠手机登录

javascript中attribute和property的分别详解

四月 28th, 2019  |  www.hg888.com

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)中,标具名始终和源代码中保持1致。
若是你不分明本人的剧本将会在
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’) { // 这样最好,适用于任何文档
  // …
}

HTML5新扩张自定义数据属性

复制代码 代码如下:

对于IE6-7来讲,未有区分attribute和property:

2、HTML 元素


具有 HTML 元素都由 HTMLElement
类型表示,不是直接通过那一个项目,也是经过它的子类型来表示。 HTMLElement
类型直接接轨自 Element 并增添了某本性能。每种 HTML
成分中都存在下列标准属性:

  1. id 成分在文书档案中的唯一标志符
  2. title 有关因素的增大表达新闻,一般经过工具提醒条彰显出来
  3. lang 成分内容的语言代码,很少使用
  4. dir 语言的势头,值为 ltr 或者 rtl,也很少使用
  5. className 与成分的 class 脾气对应
var test = document.getElementById("test");
// 下面的所有的浏览器都支持
if(test.nodeType == 1) { 
  alert(1)
}

console.log( elem.getAttribute(‘gameid’) ); // 880

attribute是一个表征节点,各类DOM成分都有一个对应的attributes属性来存放在全体的attribute节点,attributes是多个类数组的器皿,说得精确点正是NameNodeMap,总来讲之就是二个近似数组但又和数组不太雷同的器皿。attributes的各样数字索引以名值对(name=”value”)的样式存放了3个attribute节点。

5、成分的子节点


<ul id=’myUl’> <li> Item 一 </li> <li> Item 2</li> <li> Item 三 </li> </ul> <script> var
myUl = document.getElementById(‘myUl’);
console.log(myUl.childNodes.length); // IE: 叁 其余浏览器: 七</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个 <li> 成分;而一旦是别的浏览器解析,则会有 7 个子节点,包括 3个 <li> 成分 和 四 个公文节点。

借使像下边那样将成分之间的空白符删除,那么全部浏览器都会回到一样数量的子节点:

<ul id=’myUl’><li> Item 一 </li><li> Item 2</li><li> Item 3 </li></ul> <script> var
myUl = document.getElementById(‘myUl’);
console.log(myUl.childNodes.length); // 全部浏览器: 叁 </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>

 

打赏协助笔者写出越来越多好文章,谢谢!

打赏小编

nodeType值为9,
nodeName值为”#document”,
nodeValue值为null,
parentNode值为null,
ownerDocument值为null
知情文书档案document的子节点
documentElement: 该属性始终本着html成分,如下代码:
console.log(document.documentElement); // 指向html的引用
假定要求直接待上访问html成分的引用能够一贯利用该因素更加快,更方便人民群众。
childNodes: 通过childNodes列表访问文书档案成分;如下测试代码:

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

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

打赏协理笔者写出越来越多好文章,多谢!

www.hg888.com 1

1 赞 1 收藏
评论

一般来讲代码:

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

复制代码 代码如下:

DOM Element节点类型详解

2015/09/21 · HTML5 ·
DOM

正文小编: 伯乐在线 –
韩子迟
。未经小编许可,禁止转发!
迎接加入伯乐在线 专辑小编。

上文中大家讲课了 DOM
中最要紧的节点类型之1的 Document 节点类型,本文大家继续深刻,谈谈另3个第叁的节点类型 Element 。

Element类型

据此attribute和property轻松混倄在同步的因由是,繁多attribute节点还有3个相呼应的property属性,比如上边的div成分的id和class既是attribute,也有对应的property,不管选择哪一类方法都能够访问和改变。

复制代码 代码如下:

至于小编:韩子迟

www.hg888.com 2

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

www.hg888.com 3

而是他们并不是数组,大家得以测试下代码就能够,如下代码:

<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的值就为true,如:

4、attributes 属性


Element 类型是使用 attributes 属性的唯一1个 DOM
节点类型。 attributes 属性中含有一个 NamedNodeMap,与 NodeList
类似,也是3个“动态”的会见。成分的每2个性子都由贰个 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()
方法相比,唯1的分别是能回到表示被删去性情的节点 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>

nodeType的值为1;

DOM成分的attribute和property很轻松混倄在一同,分不清楚,两者是分化的东西,不过两者又联系紧凑。诸多新手朋友,也囊括在此以前的自身,平时会搞不清楚。

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

三、本性的获得和设置


各类成分都有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’)

JS代码如下:

复制代码 代码如下:

聊到底为了越来越好的分别attribute和property,基本能够计算为attribute节点都以在HTML代码中可知的,而property只是3个常备的名值对质量。

EventUtil.addHandler(window,'load',function(){
 var script = document.createElement("script");
 script.src = 'a.js';
 document.body.appendChild(script);
 EventUtil.addHandler(script,'load',function(event){
  console.log(script.src);
 });  
});

位置的div成分的HTML代码中有class、id还有自定义的gameid,这么些特点都存放在attributes中,类似下边包车型大巴花样:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

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

域名也得以安装的,举个例子大规模的跨子域的场合下,大家必要设置同样的父域就可以达成跨域;

复制代码 代码如下:

多数菜鸟朋友估算都很轻巧掉进那一个坑中。
DOM成分一些暗中同意常见的attribute节点都有与之对应的property属性,相比较新鲜的是1对值为Boolean类型的property,如局部表单成分:

<div id="test">
 <p class="a">11</p>
</div>
var test = document.getElementById("test");
console.log(test.ownerDocument); // document
var p = test.ownerDocument.getElementsByTagName("p");
console.log(p); // <p class="a">11</p>

复制代码 代码如下:

而是IE陆-7将多数东西都存放在attributes中,上面包车型客车拜访方法和正规浏览器的回来结果又不一样。常常要赢得三个attribute节点直接用getAttribute方法:

EventUtil.addHandler(window,’load’,function(event){
      alert(1);
});

复制代码 代码如下:

[ class=”box”, id=”box”, gameid=”880″ ]

<div id="test"></div>
// JS代码如下:
var test = document.getElementById("test");
test.setAttribute("id",'test');
test.setAttribute("class","testName");
test.setAttribute("title","aa");
test.setAttribute("data-value","test1");

不过对于自定义的attribute节点,或然自定义property,两者就从不提到了。

复制代码 代码如下:

复制代码 代码如下:

// gameid和id都是attribute节点
// id同时又有什么不可通过property来访问和改变
<div gameid=”880″ id=”box”>hello</div>
// areaid仅仅是property
elem.areaid = 900;

<div class=”box” id=”box” gameid=”880″>hello</div>

JS代码如下:

对于IE陆-7来讲,未有区分attribute和property:

console.log( elem.getAttribute(‘gameid’) ); // 880

轮换后的代码如下:

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

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

Node.ELEMENT_NODE(一); 成分节点
Node.ATTRIBUTE_NODE(二); 属性节点
Node.TEXT_NODE(三); 文本节点
Node.DOCUMENT_NODE(玖); 文书档案节点

[ class=”box”, id=”box”, gameid=”880″ ]

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

add(value):将加以的字符串值增多到列表中。如果值已经存在,就不增添了。
contains(value):表示列表中是否存在给定的值,假如存在则赶回true,不然重临false。
remove(value):从列表中剔除给定的字符串。
toggle(value):若是列表中壹度存在给定的值,删除它;假若列表中并未有给定的值,加多它。
明天大家能够来探视使用方面包车型大巴办法的优点如下,大家能够来做个demo,代码如下:

能够这么来做客attribute节点:

DOM成分的attribute和property很轻易混倄在一同,分不清楚,两者是不一样的东西,可是双方又联系紧凑。许多菜鸟朋友,也囊括从前的本人,平时会搞不清楚。

一.针对attributes对象中的性格,区别的浏览器再次来到的各种不一样。
二.IE七及更早的本子会回来HTML成分中颇具也许的表征,蕴涵未有点名的表征;
针对IE七的难点大家能够实行革新,大家都理解,每特性格节点都有1个名称叫specified的天性,这么些属性值即使为true,则代表要么在HTML中钦定了对应的特点,要么通过setAttribute方法设置了该性格,在IE中,全数为设置过的特性该属性的之都为false;如下代码:

对于这么些越发的attribute节点,只有存在该节点,对应的property的值就为true,如:

您也许感兴趣的篇章:

  • JavaScript中的property和attribute介绍
  • javascript
    对象属性property与成分属性attribute的浏览器帮忙
  • JavaScript中property和attribute的界别详细介绍
  • JS中DOM元素的attribute与property属性示例详解

var inputs = document.getElementsByTagName(“input”);
console.log(inputs.namedItem(“aa”)); // <input name=”aa”/>

只是IE陆-7将大多东西都存放在attributes中,下边包车型客车拜访方法和职业浏览器的回到结果又不相同。平常要博取2个attribute节点直接用getAttribute方法:

复制代码 代码如下:

理解readystatechange事件

复制代码 代码如下:

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

console.log(test.firstChild === test.childNodes[0]); // true
console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true

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

要安装八个attribute节点使用setAttribute方法,要刨除就用removeAttribute:

nodeValue的值为null;

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

复制代码 代码如下:

nodeType的值为3;
nodeName的值为”#text”;
nodeValue的值为节点所包含的文件;
parentNode是一个Element;

复制代码 代码如下:

var script = document.createElement("script");
script.type ="text/javascript";
script.src = 'a.js';
document.body.appendChild(script);

末段为了更加好的差距attribute和property,基本得以总计为attribute节点都是在HTML代码中可知的,而property只是三个平淡无奇的名值对品质。

能够这么来访问attribute节点:

具有HTML成分都由HTMLElement类型表示,HTMLElement类型直接承袭Element;假诺想要取得HTML成分的性格的话,有上面几个措施:

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

attributes是会趁机增加或删除attribute节点动态更新的。
property就是一个属性,借使把DOM成分看成是多少个一般性的Object对象,那么property正是三个以名值对(name=”value”)的款式存放在Object中的属性。要增加和删除property也大约多了,和平凡的对象没啥分别:

<div id=”myDiv” data-appId=”12345″
data-myname=”Nicholas”></div>

<div class=”box” id=”box” gameid=”880″>hello</div>

复制代码 代码如下:

<div id=”test” class=”testName” title=”aa”
data-value=”test1″></div>

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

故而attribute和property轻易混倄在同步的缘由是,多数attribute节点还有一个相呼应的property属性,比方下面的div元素的id和class既是attribute,也有相应的property,不管选用哪类方法都得以访问和修改。

IE七及以下删除类名须求采用className;

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

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

如下所示代码:

attribute是三性格剧情点,每一种DOM成分都有二个一唱一和的attributes属性来存放在全体的attribute节点,attributes是贰个类数组的器皿,说得准确点就是NameNodeMap,总来说之正是1个像样数组但又和数组不太同样的器皿。attributes的各类数字索引以名值对(name=”value”)的样式存放了二个attribute节点。

复制代码 代码如下:

<div id=”test”><p
class=”a”>11</p></div>cloneNode():

复制代码 代码如下:

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

//
true然则在IE8及前面不奏效;由于IE八及更早版本将NodeList达成为二个COM对象,而作者辈不可能像使用JScript对象那样选择对象,要想在IE低版本中改造为Array的款式,大家得以像上边同样包裹二个措施就能够;

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

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

querySelector()方法接收多少个css采用符,重返与该形式相称的首先个要素,尽管没有找到相配元素,则赶回null;如下代码:

大多新手朋友臆想都很轻便掉进那一个坑中。
DOM成分一些暗中同意常见的attribute节点都有与之相应的property属性,相比较尤其的是有些值为Boolean类型的property,如有的表单成分:

复制代码 代码如下:

移除最后1个节点的代码如下:

复制代码 代码如下:

地点的div成分的HTML代码中有class、id还有自定义的gameid,这个特征都存放在attributes中,类似上边包车型大巴款型:

div.attributes[“id”].nodeValue = “aa”;

复制代码 代码如下:

复制代码 代码如下:

轮换后html代码结构变为如下:

复制代码 代码如下:

可是对于自定义的attribute节点,只怕自定义property,两者就未有涉及了。

function loadStyleString(css) {
 var style = document.createElement("style");
 style.type = "text/css";
 try{
  style.appendChild(document.createTextNode(css));
 } catch (ex){
  style.styleSheet.cssText = css;
 }
 var head = document.getElementsByTagName("head")[0];
 head.appendChild(style);
}
// 调用方式如下:
loadStyleString("body{background-color:red}");

attributes是会趁机增加或删除attribute节点动态更新的。
property就是壹特性质,假使把DOM成分看成是三个一般性的Object对象,那么property正是三个以名值对(name=”value”)的样式存放在Object中的属性。要丰硕和删除property也大约多了,和平常的对象没啥分别:

// gameid和id都是attribute节点
// id同时又能够由此property来访问和修改
<div gameid=”880″ id=”box”>hello</div>
// areaid仅仅是property
elem.areaid = 900;

3. matchesSelector()方法

复制代码 代码如下:

复制代码 代码如下:

父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length

上面我们来探望怎样行使JS事件来判断JS是还是不是加载成功的代码,咱们得以动用load事件来监听,如下代码:

<p class=”p1″>111</p>
<p class=”p1″>222</p>
<p class=”p1″>333</p>

hasChildNodes():要是要求判别该父节点有未有子节点的话,能够选拔该方式剖断,再次回到的是三个布尔型,有再次回到true,未有回来false,如下代码:

支撑classList属性的浏览器有IE10+,firefox三.陆+和chrome

理解Text类型

地方的是针对性具有的最首要的浏览器举行李包裹装来推断动态加载的JS是或不是曾经加载成功!

Element类型是利用attributes属性的唯11个dom节点类型,attributes属性包罗一个NamedNodeMap集结;该目标有以下措施:

var test = document.getElementById(“test”);
console.log(test.hasChildNodes());

  1. 划分文本节点splitText(offset);
    从offset钦定的岗位将如今的公文节点分成3个文本节点;如下代码:

如上代码在IE8及以下下是不行的,会报错,如下:

浏览器帮助程度IE,firefox,chrome都帮助;

知道动态加载行内JS情势

复制代码 代码如下:

移除后的代码结构形成如下:

JS代码如下:

namedItem():
该办法可以经过成分的name本性取得集结中的项,例如未来页面上有诸多input的框,笔者想通过她们的name属性获得本身想要的哪一项,测试代码如下:

<ul
id=”list”><li>11</li><li>22</li><li>33</li></ul>

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 </head>
 <body>
</body>
</html>

为了更有益于调用,由此大家也足以打包3个函数来;如下代码:

var list = document.getElementById("list");
var arrs = [];
for(var i = 0, ilen = list.childNodes.length; i < ilen; i++) {
 var curElement = list.childNodes[i];
 if(curElement.nodeType === 1){
   arrs.push(curElement);
 }
}
console.log(arrs); 
console.log(arrs.length); // 3

console.log(test.childNodes[1]); // <p>bbbbbb</p>
console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

<div id=”test”><p class=”b”>22</p></div>

var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
 var link = document.createElement("link");
 link.type = "text/css";
 link.rel= "stylesheet";
 if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
  // IE 浏览器
  EventUtil.addHandler(link,'readystatechange',function(event){
   event = EventUtil.getEvent(event);
   var target = EventUtil.getTarget(event);
   if (target.readyState == "loaded" || target.readyState == "complete"){
   EventUtil.removeHandler(target, "readystatechange", arguments. callee);
    alert("css已经加载完成");
   }
  });
 }else {
  // 除IE之外的标准浏览器
  EventUtil.addHandler(link,'load',function(event){
   alert("css已经加载完成");
  });
 }
 link.href = "style.css";
 document.getElementsByTagName("head")[0].appendChild(link);
});
var element = document.createElement("div");
var text = document.createTextNode("aa");
element.appendChild(text); 
document.body.appendChild(element); 
var test = document.getElementById("test");
if(test.nodeType === Node.ELEMENT_NODE) {
 alert(1)
}

<div id=”test”>test</div>
<div class=”cls”>1111</div>
<div class=”cls”>2222</div>
<div class=”cls”>2222</div>

EventUtil.addHandler(window,'load',function(){
 var script = document.createElement("script");
 EventUtil.addHandler(script,'load',function(event){
  console.log(script.src);
 });
 script.src = 'a.js';
 document.body.appendChild(script);
});

JS代码如下:

不过假若参照节点为null的话,那么就会把新节点插入到最后面去了,如下代码:

var EventUtil = {
 addHandler: function(element,type,handler) {
  if(element.addEventListener) {
    element.addEventListener(type,handler,false);
  }else if(element.attachEvent) {
   element.attachEvent("on"+type,handler);
  }else {
   element["on" +type] = handler;
  }
 },
 removeHandler: function(element,type,handler){
  if(element.removeEventListener) {
    element.removeEventListener(type,handler,false);
  }else if(element.detachEvent) {
   element.detachEvent("on"+type,handler);
  }else {
   element["on" +type] = null;
  }
 },
 getEvent: function(event) {
  return event ? event : window.event;
 },
 getTarget: function(event) {
  return event.target || event.srcElement;
 },
 preventDefault: function(event){
  if(event.preventDefault) {
   event.preventDefault();
  }else {
   event.returnValue = false;
  }
 },
 stopPropagation: function(event) {
  if(event.stopPropagation) {
   event.stopPropagation();
  }else {
   event.cancelBubble = true;
  }
 }
};

如上情势:方今IE,firefox,chrome浏览器都支持;

console.log(Object.prototype.toString.call(test.childNodes) ===
“[object Array]”);
// false然而大家使其更改为数组,如下代码:

// 取得div中所有em元素
var em = document.getElementById("test").querySelectorAll('em');
console.log(em); // NodeList
console.log(em.length); // 4

// 第二种方式 也可以先使用querySelector
var test = document.querySelector("#test");
var em2 = test.querySelectorAll('em');
console.log(em2); // NodeList
console.log(em2.length); // 4

// 取得类为selected的所有元素
var selected = document.querySelectorAll('.selected');
console.log(selected); // <em class="selected">11111</em>
    // <em class="selected">22222</em>
// 也可以通过以下的方式获得所有的em元素
var em = document.querySelectorAll('div em');
console.log(em); // NodeList
console.log(em.length); // 4

调用removeNamedItem()方法与在要素上调用removeAttribute()方法的效果等同,是直接删除全数给定名称的风味。他们之间的界别是:removeNamedItem()方法再次来到表示被删除天性的节点;

JS代码如下:

<div id=”test”></div>
var test = document.getElementById(“test”);
console.log(test.hasChildNodes()); // false

第贰行打字与印刷7长度为7,因为她俩把公文节点那多少个空格也包罗进来了,但是在IE八及以下,长度为3,他们不包罗文件空格的节点,因而想要统壹的话,大家得以编制HTML代码去掉空格,如下HTML代码就能够;

浏览器协助程度:IE八+,firefox,chrome,safari3.1+,opera十+

www.hg888.com,JS代码如下:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

要是未有子节点的话,那么firstChild和lastChild都针对为空null;

标签:, , ,

Your Comments

近期评论

    功能


    网站地图xml地图