好资源导航 » 文章资讯 » jacascript DOM节点——元素节点、属性节点、文本节点

jacascript DOM节点——元素节点、属性节点、文本节点

2024-02-25 13:26:06 41

元素节点

元素节点就是HTML标签元素，元素节点主要提供了对元素标签名、子节点及属性的访问；

元素节点的三个node属性：nodeType：1、nodeName/TagName：元素的标签名大写、nodeValue：null；

其父节点parentNode指向包含该元素节点的元素节点Element或文档节点Document；

元素的childNodes属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点；

childNodes结合NodeType可以检查有几个元素子节点：

操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个，可以针对任何属性使用，包括那些以HTMLElement类型属性的形式定义的属性；

obj.hasAttribute(attr)方法返回一个布尔值，表示当前元素节点是否包含指定属性；
IE6/IE7不支持hasAttribute()方法；
obj.hasAttribute(attr)检测class属性时，直接用class就可以了，不要用className;
obj.hasAttribute(attr)检测for属性时，直接用for就可以了，不要用htmlFor;

varoTest=document.getElementById('test'); //IE6/IE7不支持hasAttribute方法 console.log(oTest.hasAttribute('class'));//true console.log(oTest.hasAttribute('className'));//false console.log(oTest.hasAttribute('id'));//true console.log(oTest.hasAttribute('style'));//true console.log(oTest.hasAttribute('for'));//true console.log(oTest.hasAttribute('htmlFor'));//false

obj.getAttribute(attr)方法用于取得属性的值，如果给定名称的属性不存在或无参数则返回null；
obj.getAttribute(attr)获取class时，直接用class就可以了；IE6/IE7除外，IE6/IE7的getAttribute(attr)方法要用className；
obj.getAttribute(attr)获取for时，直接用for就可以了；
obj.setAttribute(attr,value)方法接受两个参数：要设置的属性名和值，如果已经存在，则替换现有的值。如果属性不存在，则创建该属性并设置相应的值。该方法无返回值；
obj.setAttribute(attr,value)设置class时，直接用class就可以了；
obj.setAttribute(attr,value)设置for时，直接用for就可以了；
obj.setAttribute(attr,value)设置style时，直接用style就可以了；在IE7及以下，用obj.style.setAttribute("cssText",value); 这里的style只是行间样式；
我们一般用obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];来获取元素当前样式；


varoTest=document.getElementById('test');
oTest.setAttribute('class','aaa');//setAttribute直接用class就可以了
oTest.setAttribute('className','bbb');
console.log(oTest.class);//undefinedIE8及以下会报错缺少标识符
console.log(oTest.getAttribute('class'));//aaagetAttribute直接用class就可以了
console.log(oTest.className);//aaa
console.log(oTest.getAttribute('className'));//bbb
oTest.setAttribute('style','border:1pxsolidred;height:100px;');//setAttribute直接用style就可以了
console.log(oTest.style);//所有的style设置，包括你没有设置的，太多了，肯定不是你想要的
console.log(oTest.getAttribute('style'));
//border:1pxsolidred;height:100px;getAttribute直接用style就可以了
oTest.setAttribute('for','eee');//setAttribute直接用for就可以了
oTest.setAttribute('htmlFor','fff')
console.log(oTest.for);//undefinedIE8及以下会报错缺少标识符
console.log(oTest.htmlFor);//undefined
console.log(oTest.getAttribute('for'));//eeegetAttribute直接用for就可以了
console.log(oTest.getAttribute('htmlFor'));//fff
console.log(oTest);
//123

obj.removeAttribute(attr)方法用于彻底删除元素的属性，这个方法不仅会彻底删除元素的属性值，还会删除元素属性。该方法无返回值；

varoTest=document.getElementById('test'); oTest.removeAttribute('class');//removeAttribute直接用class就可以了 oTest.removeAttribute('for'); oTest.removeAttribute('style'); console.log(oTest);//123

属性节点

属性节点，有的叫特性节点，差不多一个意思；

属性节点的三个node属性，nodeType:2、nodeName/name:属性名称、nodeValue/value：属性值；

属性节点还有一个specified属性，specified是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着在HTML中指定了相应特性，或者是通过setAttribute()方法设置了该属性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中，所有设置过的特性的该属性值都是true，未设置过的特性，如果强行为其设置specified属性，则报错。

元素节点有一个attributes属性，它包含一个NamedNodeMap，包含当前元素所有的属性及属性值，与NodeList类似，也是一个动态的集合。元素的每一个属性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，每个节点的nodeName就是属性的名称，节点的nodeValue就是属性的值；

createAttribute(attr)创建新的属性节点；

attributes属性包含以下四个方法:

obj.attributes.setNamedItem(attr); 向列表中添加节点，该方法无返回值；要先创建属性，在以nodeValue的形式赋属性值，在传入setNamedItem
obj.attributes.getNamedItem(attr); 返回nodeName属性等于attr的节点；以"attr=value"形式返回；
obj.attributes.removeNamedItem(attr);从列表中移除nodeName属性等于attr的节点，并返回该节点；
obj.attributes.item(index);返回位于下标index位置处的节点，也可以用[]代替，obj.attributes[index]；

varoTest=document.getElementById('test'); console.log(oTest.attributes);//NamedNodeMap{0:class,1:id,2:for,3:style,length:4} console.log(oTest.attributes.item(1).specified);//true console.log(oTest.attributes.getNamedItem('id'));//id='test' console.log(typeofoTest.attributes.getNamedItem('id'));//object console.log(oTest.attributes.removeNamedItem('for'));//id='test' console.log(oTest.attributes);//NamedNodeMap{0:class,1:id,2:style,length:3} varabc=document.createAttribute("abc"); abc.nodeValue="1234567"; oTest.attributes.setNamedItem(abc); //obj.attributes.setNamedItem(attr)要先创建属性，在以nodeValue的形式赋属性值，在传入setNamedItem console.log(oTest.attributes);//NamedNodeMap{0:class,1:id,2:style,3:abc,length:4} console.log(oTest.attributes.item(1));//id='test' console.log(oTest.attributes[1]);//id='test'

attributes属性主要用于属性遍历。在需要将DOM结构序列化为HTML字符串时，多数都会涉及遍历元素特性

123

functionoutputAttributes(obj){
vararr=[],
attrName,
attrValue,
i;
for(i=0;i

文本节点

文本节点的三个node属性，nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本，其父节点parentNode指向包含该文本节点的元素节点，文本节点没有子节点；

关于文本节点，遇到最多的兼容问题是空白文本节点问题。IE8及以下浏览器不识别空白文本节点，而其他浏览器会识别空白文本节点；所以有时候我们需要清理空白文本节点；


helloworld!


varoTest=document.getElementById('test');
//第一个和最后一个都是空白文本节点
console.log(oTest.firstChild);//""
console.log(oTest.lastChild);//""
console.log(oTest.childNodes);//[text,div,text]
//标准浏览器输出[text,div,text]，text表示空白文本节点
//IE8及以下浏览器输出[div]，并不包含空白文本节点
console.log(oTest.childNodes.length);//3
//标准浏览器返回3
//IE8及以下浏览器返回1，并不包含空白文本节点
//清理空白文本节点
functioncleanWhitespace(oEelement){
for(vari=0;i

文本节点属性：

文本节点的data属性与nodeValue属性相同；
wholeText属性将当前Text节点与毗邻的Text节点，作为一个整体返回。大多数情况下，wholeText属性的返回值，与data属性和textContent属性相同；
文本节点的length属性保存着节点字符的数目，而且nodeValue.length、data.length也保存着相同的值；

helloworld!
helloworld!

varoTestData=document.getElementById('testData');
//第一个和最后一个都是空白文本节点
console.log(oTestData.firstChild);//"helloworld!"
console.log(typeofoTestData.firstChild);//object
console.log(oTestData.childNodes.length);//1
console.log(oTestData.firstChild.nodeValue);//"helloworld!"
console.log(typeofoTestData.firstChild.nodeValue);//string
console.log(oTestData.firstChild.data);//"helloworld!"
//文本节点的data属性与nodeValue属性相同,都是string类型
console.log(oTestData.firstChild.data===oTestData.firstChild.nodeValue);//true
varoTestWholeText=document.getElementById('testWholeText');
console.log(oTestWholeText.childNodes);//[text]
console.log(oTestWholeText.childNodes.length);//1
console.log(oTestWholeText.firstChild.wholeText);//helloworld!
console.log(oTestWholeText.firstChild.data);//helloworld!
oTestWholeText.firstChild.splitText('or');
console.log(oTestWholeText.childNodes);//[text,text]
console.log(oTestWholeText.childNodes.length);//2
console.log(oTestWholeText.firstChild);//#text
console.log(oTestWholeText.firstChild.wholeText);//helloworld!
//wholeText属性将当前Text节点与毗邻的Text节点，作为一个整体返回。
console.log(oTestData.firstChild.length);//12
console.log(oTestData.firstChild.nodeValue.length);//12
console.log(oTestData.firstChild.data.length);//12

文本节点方法：

文本节点的操作与字符串的操作方法相当类似。一般地，我们获取文本都用innerHTML，然后再去字符串的操作方法去操作。

document.createTextNode(text);方法用于创建文本节点，这个方法接收一个参数，要插入节点中的文本；插入的是文本，就算写的是标签，也是当做文本来插入的；
splitText(index)方法将一个文本节点分成两个文本节点，即按照index指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点，包含剩下的文本；
appendData(text)方法将text添加到节点的末尾，该方法无返回值；
deleteData(index,count)方法从index指定的位置开始删除count个字符，无返回值；
insertData(index,text)方法在index指定的位置插入text，无返回值；
replaceData(index,count,text)方法用text替换从index指定位置开始到index+count为止的文本，无返回值；
substringData(index,count)方法提取从index指定的位置开始到offset+count为止处的字符串，并返回该字符串。原来的文本节点无变化；

以上所述是小编给大家介绍的jacascriptDOM节点——元素节点、属性节点、文本节点，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

jacascript DOM节点——元素节点、属性节点、文本节点

热门推荐

随机推荐