您所不打听的javascript操作DOM的细节知识点(壹)

您所不打听的javascript操作DOM的细节知识点(壹)

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’) { // 这样最好,适用于任何文档
  // …
}

Document类型

复制代码 代码如下:

只是对于自定义的attribute节点,可能自定义property,两者就未有关联了。

至于我:韩子迟

图片 1

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

图片 2

ownerDocument:
全体节点都有最终二个性质是ownerDocument,该属性指向表示整个文书档案的文档节点,那种关涉表示的其余节点都属于它所在的文书档案,任何节点都无法同时设有四个或更加多文书档案中,通过那特性情,大家得以不用在节点档案的次序中经过层层回溯到达顶端,而是能够直接待上访问文档节点;如下测试代码:

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

地点的div成分的HTML代码中有class、id还有自定义的gameid,那些特点都存放在attributes中,类似上面包车型客车款型:

DOM Element节点类型详解

2015/09/21 · HTML5 ·
DOM

正文我: 伯乐在线 –
韩子迟
。未经我许可,禁止转发!
应接参与伯乐在线 专辑小编。

上文中大家讲课了 DOM
中最珍视的节点类型之1的 Document 节点类型,本文大家承接浓厚,谈谈另二个人命关天的节点类型 Element 。

但是未来HTML伍增加产量了1种操作类名的措施,可以让操作更简便易行也更方便,那正是具备因素增多classList属性。那个classList属性是新集结类型DOMTokenList的实例;DOMTokenList有三个意味友好带有多少成分的length属性,而要获得每一种元素得以行使item()方法,也能够动用中括号;

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

attribute是一个风味节点,各样DOM元素都有三个应和的attributes属性来存放在全数的attribute节点,attributes是2个类数组的器皿,说得精确点正是NameNodeMap,不问可见正是一个近乎数组但又和数组不太①致的器皿。attributes的各类数字索引以名值对(name=”value”)的款型存放了多个attribute节点。

2、HTML 元素


装有 HTML 成分都由 HTMLElement
类型表示,不是间接通过这么些体系,也是由此它的子类型来表示。 HTMLElement
类型直接接轨自 Element 并增多了有个别本性。每一个 HTML
成分中都留存下列规范属性:

  1. id 成分在文书档案中的唯壹标记符
  2. title 有关因素的附加表达音讯,一般经过工具提示条显示出来
  3. lang 成分内容的语言代码,很少使用
  4. dir 语言的趋势,值为 ltr 或者 rtl,也很少使用
  5. className 与元素的 class 特性对应

HTML代码如下:

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

复制代码 代码如下:

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 属性中带有1多种的节点,各样节点的 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’); // 增添新特点 //
必要传入3个风味节点 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>

移除最终2个节点的代码如下:

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

复制代码 代码如下:

伍、元素的子节点


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

假使像上面那样将成分之间的空白符删除,那么具备浏览器都会回去一样数量的子节点:

<ul id=’myUl’><li> Item 壹 </li><li> Item 二</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>

 

打赏协理自个儿写出越多好小说,感激!

打赏小编

JS如下:

attribute是一个特色节点,种种DOM元素都有一个应和的attributes属性来存放全体的attribute节点,attributes是三个类数组的容器,说得正确点便是NameNodeMap,综上可得正是1个看似数组但又和数组不太一样的容器。attributes的每种数字索引以名值对(name=”value”)的方式存放了二个attribute节点。

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

打赏支持本身写出越来越多好文章,多谢!

图片 3

1 赞 1 收藏
评论

Element节点有以下特点:

对此IE六-七来讲,未有区分attribute和property:

attributes是会随着拉长或删除attribute节点动态更新的。
property正是二个天性,假使把DOM成分看成是八个普通的Object对象,那么property正是一个以名值对(name=”value”)的花样存放在Object中的属性。要加上和删除property也大约多了,和平凡的靶子没啥分别:

叁、性子的获得和安装


种种成分都有二个或三个特征,这一个特点的用途是交给相应成分或其内容的增大新闻。操作性情的
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
文本,而经过属性来访问会回来3个目标。再譬如 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脚本,常见的写法有如下代码就能够插入:

复制代码 代码如下:

复制代码 代码如下:

注意:如上代码:不仅在正儿8经浏览器下chrome,firefox,opera下扶助,而且IE7-拾都补助那种加载;不过safari不扶助那种加载;

attributes是会趁着增加或删除attribute节点动态更新的。
property正是一个属性,假使把DOM成分看成是1个日常的Object对象,那么property正是一个以名值对(name=”value”)的方式存放在Object中的属性。要加上和删除property也简要多了,和一般性的靶子没啥分别:

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

本来也足以获得自定义的天性;如下代码:

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

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

querySelectorAll()方法接收的参数与querySelector()方法1致,都以三个css选用符,不过回去的是独具相配的成分,这些法子重临的是3个NodeList的实例。

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

唯独IE6-7将众多事物都存放在attributes中,上边的造访方法和规范浏览器的归来结果又不一致。经常要得到二个attribute节点直接用getAttribute方法:

要访问成分的标具名,能够运用nodeName属性,也足以行使tagName属性,那八个属性会重返同样的值,如下代码:

复制代码 代码如下:

能够如此来访问attribute节点:

复制代码 代码如下:

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

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

var test = document.getElementById("test");
// 下面的所有的浏览器都支持
if(test.nodeType == 1) { 
  alert(1)
}

故而attribute和property轻巧混倄在联合签字的缘由是,诸多attribute节点还有1个相呼应的property属性,例如上面的div成分的id和class既是attribute,也有照料的property,不管采用哪个种类艺术都足以访问和修改。

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

DOM的扩展

唯独对于自定义的attribute节点,只怕自定义property,两者就不曾关系了。

复制代码 代码如下:

浏览器帮助程度:IE八+,firefox,chrome,safari3.一+,opera10+

最后为了更加好的区分attribute和property,基本能够总结为attribute节点都以在HTML代码中可知的,而property只是一个无独有偶的名值对质量。

复制代码 代码如下:

removeAttribute(); 删除成分的性情;如下代码:

唯独IE6-7将众多东西都存放在attributes中,上面的造访方法和专门的学问浏览器的回来结果又差别。平时要获取1个attribute节点直接用getAttribute方法:

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

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

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

复制代码 代码如下:

照旧和javascript一样,我们也足以针对IE下做壹种那样的管理;代码如下,也得以补助具备的IE下:

DOM成分的attribute和property很轻便混倄在一同,分不清楚,两者是区别的东西,可是相互又联系紧凑。好些个菜鸟朋友,也席卷在此此前的本身,平日会搞不清楚。

故此attribute和property轻便混倄在一道的原委是,多数attribute节点还有一个相对应的property属性,举个例子上边的div成分的id和class既是attribute,也有相应的property,不管选择哪一种方式都得以访问和修改。

var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
 var script = document.createElement("script");
 if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
  // IE 浏览器
  EventUtil.addHandler(script,'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);
    console.log("javascript已经加载完成");
   }
  });
 }else {
  // 除IE之外的标准浏览器
  EventUtil.addHandler(script,'load',function(event){
   console.log("javascript已经加载完成");
  });
 }
 script.src = 'a.js';
 document.body.appendChild(script);
});

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

var script = document.createElement('script');
script.type = 'text/javascript';
var code = "function sayHi(){alert(1);} sayHi()";
try{
 script.appendChild(document.createTextNode(code));
}catch(e){
 script.text = code;
}
document.body.appendChild(script);

复制代码 代码如下:

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

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( elem.getAttribute(‘gameid’) ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = ‘900’;
console.log( elem.getAttribute(‘areaid’) ) // null

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

复制代码 代码如下:

复制代码 代码如下:

您或者感兴趣的篇章:

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

布置节点后,结构形成如下:

复制代码 代码如下:

复制代码 代码如下:

var test = document.getElementById("test");
if(test.nodeType == 1) {
 console.log(test.nodeName); // 打印DIV
 console.log(test.nodeValue); // 打印null
}

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

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

如下代码:

成都百货上千新手朋友猜度都很轻松掉进这么些坑中。
DOM成分一些暗中认可常见的attribute节点都有与之相应的property属性,比较奇特的是一些值为Boolean类型的property,如部分表单元素:

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

console.log(test.getAttribute(“data-value”)); // test1

能够如此来拜会attribute节点:

复制代码 代码如下:

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

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

对于IE陆-7来讲,未有不一致attribute和property:

日前唯有IE玖+,Firefox,opera,chrome和safari叁+帮助,IE八及以下不援救该load事件,由此大家需求针对IE八及以下做管理;

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

复制代码 代码如下:

图片 4

复制代码 代码如下:

终极为了越来越好的区分attribute和property,基本得以总括为attribute节点都以在HTML代码中可见的,而property只是三个平淡无奇的名值对质量。

EventUtil.addHandler(window,'load',function(){
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 EventUtil.addHandler(link, "load", function(event){
  console.log("css loaded");
 });
 link.href = "style.css";
 document.getElementsByTagName("head")[0].appendChild(link);
});

复制代码 代码如下:

复制代码 代码如下:

<div id="test" class="testName" title="aa"></div>
var test = document.getElementById("test");
console.log(test.getAttribute("id")); // test
console.log(test.getAttribute("class")); // testName
console.log(test.getAttribute("title")); // aa

复制代码 代码如下:

大多菜鸟朋友猜想都很轻松掉进这几个坑中。
DOM成分一些暗许常见的attribute节点都有与之对应的property属性,相比新鲜的是部分值为Boolean类型的property,如有的表单成分:

HTML5中分明可以为要素增多非标准的习性,但要增加前缀data-,比方如下代码:

复制代码 代码如下:

复制代码 代码如下:

但是壹旦参照节点为null的话,那么就会把新节点插入到最前面去了,如下代码:

复制代码 代码如下:

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

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 移除第一个节点
var returnNode = test.removeChild(test.firstChild);
console.log(returnNode); // <p class="a">11</p>

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

对此那么些尤其的attribute节点,只有存在该节点,对应的property的值就为true,如:

其次种是经过JS来触发,如下代码:

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

DOM成分的attribute和property很轻易混倄在壹块,分不清楚,两者是例外的东西,但是两者又关联紧凑。很多新手朋友,也包罗之前的我,平时会搞不清楚。

namedItem():
该办法能够透过成分的name性子获得会集中的项,举例现在页面上有繁多input的框,笔者想透过她们的name属性获得本人想要的哪1项,测试代码如下:

对此那么些至极的attribute节点,唯有存在该节点,对应的property的值就为true,如:

复制代码 代码如下:

Text节点具有以下特点:

上面的div成分的HTML代码中有class、id还有自定义的gameid,这一个特点都存放在attributes中,类似上面包车型地铁花样:

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

还有以下方法:

复制代码 代码如下:

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

title:  通过这几个性情能够赢得网页的标题,如下测试代码:

本条方式接收二个参数,即css选择符,就算调用成分与该选拔符相配,再次来到true,不然,重返false;

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
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);
});
EventUtil.addHandler(window, "load", function(){
 var link = document.createElement("link");
 link.type = "text/css";
 link.rel= "stylesheet";
 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 Loaded");
  }
 });
 link.href = "style.css";
 document.getElementsByTagName("head")[0].appendChild(link);
});

// 移除最终八个节点
var returnNode = test.removeChild(test.lastChild);
console.log(returnNode); // <p class=”b”>22</p>
移除后的代码结构形成如下:

图片 5

var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.appendChild(document.createTextNode(“function sayHi(){alert(1);}
sayHi()”));
document.body.appendChild(script);

var test = document.getElementById("test");
if(test.nodeType === Node.ELEMENT_NODE) {
 alert(1)
}
var div = document.getElementById("test");
function outputAttributes(element) {
 var arrs = new Array();
 var attrName,
  attrValue,
 i,
 len;
 for(i = 0, len = element.attributes.length; i < len; i++) {
  attrName = element.attributes[i].nodeName;
  attrValue = element.attributes[i].nodeValue;
  if(element.attributes[i].specified) {
    arrs.push(attrName + "='" + attrValue + "'");
  }
 }
 return arrs.join(" ");
}
console.log(outputAttributes(div));

JS代码如下:

<div id=”test”>
    <p class=”a”>11</p>
    <div></div>
</div>

复制代码 代码如下:

<div id=”test”><p class=”a”>aaaaaa</p><p
class=”b”>bbbbbb</p><p
class=”c”>cccccc</p></div>

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

console.log(document.domain); // 127.0.0.1

咱俩也能够采纳事件的法门来剖断css动态加载是还是不是已经加载成功~

浏览器援救程度:IE捌+,firefox,chrome,safari3.①+,opera拾+

复制代码 代码如下:

appendChild():
用于向childNodes列表的最后增多3个节点;重回的是新添的节点;如下代码:

比如该节点列表中唯有3个节点的话,那么该节点的previousSibling和nextSibling都为null;父节点的firstChild指向了父节点中第三个节点;如下代码:

var div = document.getElementById("test");
function outputAttributes(element) {
 var arrs = new Array();
 var attrName,
   attrValue,
  i,
  len;
 for(i = 0, len = element.attributes.length; i < len; i++) {
  attrName = element.attributes[i].nodeName;
  attrValue = element.attributes[i].nodeValue;
  arrs.push(attrName + "='" + attrValue + "'");
 }
 return arrs.join(" ");
}
console.log(outputAttributes(div));

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

JS代码如下:

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

自己想经过先获得div中的testParent,然后再拿走p元素(通过querySelector方法);如下代码:

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

一.创办理文件本节点;
能够选择document.createTextNode()成立新文本节点,那个情势需求四个参数,即要插入的文件,如下代码:

body {background-color:red;}

EventUtil.addHandler(window,'load',function(){
 var script = document.createElement("script");
 EventUtil.addHandler(script,'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(script.src);
  }
 });
 script.src = 'a.js';
 document.body.appendChild(script); 
});

JS通过Document类型表示文书档案,document承接HTMLDocument(传承自Document)类型的2个实例,表示整个HTML页面。document对象是window的一脾品质,所以能够由此全局对象来做客,document对象有如下特征:

<div id=”test”>
<p class=”a”>11</p>
</div>

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

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

复制代码 代码如下:

理解Text类型

var list = document.getElementById(“list”);
console.log(list.childNodes);
console.log(list.childNodes.length);

精晓成分的子节点

HTML伍新扩展自定义数据属性

故此大家也能够像JS同样包裹二个全兼容的css样式;如下代码所示:

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

var element = document.createElement("div");
var text = document.createTextNode("aa");
element.appendChild(text); 
document.body.appendChild(element); 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图