金沙js333娱乐场DOM Element节点类型详解

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

正如代码:

由此attribute和property简单混倄在壹齐的原委是,很多attribute节点还有3个相对应的property属性,比如下面的div成分的id和class既是attribute,也有对应的property,不管接纳哪一类办法都能够访问和修改。

打赏协助作者写出更加多好小说,多谢!

金沙js333娱乐场 1

1 赞 1 收藏
评论

Element节点有以下特征:

attribute是2个特色节点,种种DOM元素都有3个对应的attributes属性来存放在全体的attribute节点,attributes是二个类数组的容器,说得准确点就是NameNodeMap,由此可知正是叁个近乎数组但又和数组不太雷同的器皿。attributes的各种数字索引以名值对(name=”value”)的样式存放了三个attribute节点。

DOM Element节点类型详解

2015/09/21 · HTML5 ·
DOM

正文小编: 伯乐在线 –
韩子迟
。未经小编许可,禁止转载!
欢迎参与伯乐在线 专栏撰稿人。

上文中大家讲解了 DOM
中最首要的节点类型之壹的 Document 节点类型,本文大家后续深切,谈谈另三个要害的节点类型 Element 。

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

复制代码 代码如下:

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’) { // 这样最好,适用于任何文档
  // …
}
var element = document.createElement("div");
var text = document.createTextNode("aabbbccc");
element.appendChild(text);
document.body.appendChild(element);

var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); // aabbb
console.log(newNode.nodeValue); // ccc 
console.log(element.childNodes.length); // 2

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

有关作者:韩子迟

金沙js333娱乐场 2

a JavaScript beginner
个人主页 ·
笔者的篇章 ·
9 ·
   

金沙js333娱乐场 3

如下所示代码:

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

4、attributes 属性


Element 类型是使用 attributes 属性的唯一一个 DOM
节点类型。 attributes 属性中隐含二个 NamedNodeMap,与 NodeList
类似,也是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()
方法相比较,唯一的界别是能回到表示被删去天性的节点 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>

getNamedItem(name): 再次来到nodeName属性等于name的节点;

复制代码 代码如下:

伍、成分的子节点


<ul id=’myUl’> <li> Item 一 </li> <li> Item 二</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> 元素会有 三 个子节点,分别是 一个 <li> 成分;而壹旦是任何浏览器解析,则会有 7 个子节点,包罗 三个 <li> 成分 和 四 个公文节点。

比方像下边那样将成分之间的空白符删除,那么全体浏览器都会回去相同数量的子节点:

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

 

打赏协助本身写出越多好小说,多谢!

打赏笔者

function matchesSelector(element,selector) {
if(element.MatchesSelector) {
 return element.MatchesSelector(selector);
}else if(element.msMatchesSelector) {
 return element.msMatchesSelector(selector);
}else if(element.webkitMatchesSelector) {
 return element.webkitMatchesSelector(selector);
}else if(element.mozMatchesSelector) {
 return element.mozMatchesSelector(selector);
}else {
  throw new Error("Not supported");
 }
}
console.log(matchesSelector(document.body,'body')); // true
var test = document.querySelector('#test');
console.log(matchesSelector(test,'#test')); // true

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

2、HTML 元素


富有 HTML 成分都由 HTMLElement
类型表示,不是一向通过那一个项目,也是透过它的子类型来表示。 HTMLElement
类型直接接轨自 Element 并添加了1些质量。各类 HTML
成分中都留存下列标准属性:

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

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

复制代码 代码如下:

//在IE8 及此前版本中没用
var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
console.log(arrayOfNodes instanceof Array);

复制代码 代码如下:

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

复制代码 代码如下:

动态加载样式如下代码:

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

因为IE未有当面Node类型的构造函数,因而在IE八-下会有错误,可是大家可以透过数值来比较,比如上边的要相比较成分节点的话,大家能够使用1来比较,同理属性节点是二,文本节点是三;如下代码:

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

Element类型

复制代码 代码如下:

<div
id=”test”><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

能够如此来拜访attribute节点:

nodeName保存的是因素的标签名,而nodeValue1般都是null;我们可以看如下代码,没有万分的证实,HTML代码都以地点的,由此那边就不贴代码了;如下JS代码测试:

复制代码 代码如下:

浏览器支持的品位有;firefox6+和chrome浏览器;

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

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

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

因此大家也能够像JS一样包裹叁个全包容的css样式;如下代码所示:

对此IE陆-7来说,未有分歧attribute和property:

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

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

如上代码,在专业浏览器下及IE九+下 第3行打字与印刷如下:

复制代码 代码如下:

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

诸多新手朋友预计都很简单掉进这些坑中。
DOM成分1些暗许常见的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

IE七及以下删除类名必要选择className;

但是IE陆-7将过多事物都存放在attributes中,上边包车型地铁走访方法和正式浏览器的回来结果又不相同。平时要获得3个attribute节点直接用getAttribute方法:

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

我们还能越来越深刻的看下如下测试代码:

末尾为了更加好的分别attribute和property,基本可以计算为attribute节点都以在HTML代码中可见的,而property只是2个家常的名值对质量。

nodeValue的值为null;

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

JS代码如下:

复制代码 代码如下:

克隆三个等同的副本,该方法接收二个布尔值参数,假设为true的话,表达是深复制,复制该节点及全体子节点书,要是为false的话,只复制该节点自身,比如如下代码:

复制代码 代码如下:

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

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

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

复制代码 代码如下:

如上代码在firefox,IE玖+,chrome和opera中,都是正规的,能够运作的,不过在IE8及以下会报错,如下:

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

var ems = document.querySelectorAll('#test em');
for(var i = 0, ilen = ems.length; i < ilen; i++) {
 console.log(ems[i]); // 取得每一项em
 console.log(ems.item(i)); // 取得每一项em
}

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

JS代码如下:

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

与动态脚本类似,所谓动态样式是指在页面刚载入时不存在的体裁,动态样式是在页面加载成功后动态增进到页面中的;

DOM成分的attribute和property很不难混倄在共同,分不清楚,两者是分歧的东西,然则两者又联系紧凑。很多新手朋友,也囊括在此之前的我,日常会搞不清楚。

var testParent = document.querySelector('.testParent');
var pfirst = testParent.querySelector("p");
console.log(pfirst); // <p>1111</p>

复制代码 代码如下:

add(value):将加以的字符串值添加到列表中。若是值已经存在,就不添加了。
contains(value):表示列表中是或不是留存给定的值,就算存在则赶回true,不然再次来到false。
remove(value):从列表中删去给定的字符串。
toggle(value):假设列表中早就存在给定的值,删除它;即使列表中绝非给定的值,添加它。
当今我们得以来探视使用方面包车型客车办法的亮点如下,我们得以来做个demo,代码如下:

不过对于自定义的attribute节点,或然自定义property,两者就向来不涉嫌了。

而是今后HTML五骤增了一种操作类名的办法,能够让操作更不难也更有利,那便是兼具因素添加classList属性。那么些classList属性是新集合类型DOMTokenList的实例;DOMTokenList有3个象征友好带有多少成分的length属性,而要取得各种成分得以应用item()方法,也得以利用中括号;

地点的div成分的HTML代码中有class、id还有自定义的gameid,那几个特色都存放在attributes中,类似上面的花样:

removeAttribute(); 删除成分的特色;如下代码:

attributes是会趁着增加或删除attribute节点动态更新的。
property正是三个属性,要是把DOM成分看成是贰个见怪不怪的Object对象,那么property正是1个以名值对(name=”value”)的花样存放在Object中的属性。要加上和删除property也简要多了,和平日的目的没啥分别:

<div id=”test” data-value=”test1″></div>

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

驾驭动态加载css样式

浏览器援助程度IE,firefox,chrome都协理;

var test = document.getElementById(“test”);
var newNode = document.createElement(“div”);
var returnNode = test.insertBefore(newNode,null);

nodeType值为9,
nodeName值为”#document”,
nodeValue值为null,
parentNode值为null,
ownerDocument值为null
明亮文书档案document的子节点
documentElement: 该属性始终本着html成分,如下代码:
console.log(document.documentElement); // 指向html的引用
万1需求直接待上访问html成分的引用能够平昔利用该因素更加快,更方便。
childNodes: 通过childNodes列表访问文书档案元素;如下测试代码:

var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "function sayHi(){alert(1);} sayHi()";
document.body.appendChild(script);
  1. querySelector()方法

<div class=”aa bb cc” id=”div”>aaa</div>

只是她们并不是数组,我们能够测试下代码即可,如下代码:

console.log(test.getAttribute(“className”)); // testName

复制代码 代码如下:

<div id="test">
 <p>aaaaaa</p>
 <p>bbbbbb</p>
 <p>cccccc</p>
</div>

要拜访成分的标签名,能够行使nodeName属性,也足以动用tagName属性,那四个属性会再次回到相同的值,如下代码:

清楚DOM操作—动态插入脚本

知剧情点关系

nodeType的值为1;

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

JS代码如下:

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

console.log(Object.prototype.toString.call(test.childNodes) ===
“[object Array]”);
// false不过我们使其更换为数组,如下代码:

3. matchesSelector()方法

如上代码即可动态生成css样式;

复制代码 代码如下:

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

  • 1]; 如下代码:

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

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

复制代码 代码如下:

function loadScript(url) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 document.body.appendChild(script);
}
loadScript("a.js");

如上代码在有着的浏览器都帮助,通过判断该因素是否因秋天点,然后在实践后续操作;不是因早秋点都会过滤掉,由此回到的尺寸都为三;

理解Text类型

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替换最后一个节点
var returnNode = test.replaceChild(newNode,test.lastChild);
console.log(returnNode); // <p class="b">22</p>

要素得以有私行数指标子节点和后代节点,成分的childNodes属性中它包蕴了它的全体子节点,那个子节点大概是因素,文本节点,注释或处理指令;差别的浏览器子节点的个数不等同,上面大家来探望demo如下:

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

JS代码如下:

唯独下面大家有getAttribute,setAttribute(),removeAttribute()方法,大家得以行使这几个方法丰盛代替下面介绍的多少个点子,但是倘诺想遍历二个要素上有多少个属性时,attributes那么些就能够派上用上了,如下代码:

地方的是针对性富有的基本点的浏览器进行李包裹装来判断动态加载的JS是不是曾经加载成功!

金沙js333娱乐场 4

下边我们得以行使javascript客户端检查测试技能来判定是还是不是是IE和别的标准浏览器做八个简约的包装;如下代码:

U昂CoraL:  取得页面中总体的url,如下代码测试:

但是只要参照节点为null的话,那么就会把新节点插入到结尾面去了,如下代码:

复制代码 代码如下:

JS代码如下:

var test = document.getElementById("test");
test.removeAttribute("id");
test.removeAttribute("class");
test.removeAttribute("title");
test.removeAttribute("data-value");

<script>(在IE和opera)中和<link>(仅IE中)成分也会触发readystatechange事件,能够用来规定外部的javascript和css文件是还是不是已经加载成功,基于成分触发的readystatechange事件,即readyState属性无论等于”loaded”还是”complete”都能够象征财富已经可用;如下针对IE的论断javascript是不是已经加载成功的方案:

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

HTML代码如下:

不无HTML成分都由HTMLElement类型表示,HTMLElement类型直接继承Element;假使想要取得HTML成分的特点的话,有下面多少个艺术:

console.log(div.getAttribute(“id”)); // test

<div id="test">
 <p>aaaaaa</p>
 <p>bbbbbb</p>
 <p>cccccc</p>
</div>

当今在享有的主流的浏览器都是例行的,在IE八及以下也是符合规律的;可是在safari3.0以前的本子不能够科学的支撑text属性,但能够允许使用文本节点来钦定代码;如下代码:

理解nodeName与nodeValue

同理大家也足以经过Element类型调用querySelector()方法时,只会在该因素后代范围内搜索相称的要素,如下代码:

getAttribute(); 获取成分的性情的方法;如下测试代码:

复制代码 代码如下:

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

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
//取得自定义属性的值
var value1 = div.dataset.value;
console.log(value1); // 12345
var name1 = div.dataset.name;
console.log(name1); // Nicholas
//设置值
div.dataset.value = 23456;
div.dataset.name = "Michael";
//有没有"myname"值呢?
if (div.dataset.name){
 console.log("Hello, " + div.dataset.name); // Hello, Michael
}

domain: 该属性包蕴页面包车型客车域名;如下测试代码:

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

title:  通过那一个性情能够获取网页的题目,如下测试代码:

<body onload=”a()”></body>

uninitialized(未起首化):对象存在但未有初阶化;
loading(正在加载):对象正在加载数据;
loaded(加载实现): 对象加载数据形成;
interactive(交互): 能够操作对象了,但平昔不完全加载;
complete(完毕):对象已经加载成功;

支撑getElementsByClassName()方法的浏览器有IE九+,firefox三+,safari三.壹+,chrome和opera九.五+;

通晓HTML成分中的获取属性的措施

JS代码如下:

如上海艺术剧场术:近来IE,firefox,chrome浏览器都支持;

如下代码演示:

JS代码如下:

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

发表评论

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