时间:2021-07-01 10:21:17 帮助过:3人阅读
元素节点
元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;
元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null;
其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document;
元素的 childNodes 属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点;
childNodes 结合 NodeType 可以检查有几个元素子节点:
- <ul class="list" id="list">
- <li class="in"></li>
- <li class="in"></li>
- </ul>
- <script>
- var oList = document.getElementById('list');
- var children = oList.childNodes;
- var num = 0;
- for(var i = 0; i < children.length; i++){
- if(children[i].nodeType == 1){
- num++;
- }
- }
- console.log(num);//2 有2个元素子节点
- </script>
操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何属性使用,包括那些以HTMLElement类型属性的形式定义的属性;
- <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
- <script type="text/javascript">
- var oTest = 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
- </script>
- <script type="text/javascript">
- var oTest = document.getElementById('test');
- oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
- oTest.setAttribute('className','bbb');
- console.log(oTest.class);//undefined IE8及以下会报错缺少标识符
- console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
- console.log(oTest.className);//aaa
- console.log(oTest.getAttribute('className'));//bbb
- oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
- console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的
- console.log(oTest.getAttribute('style'));
- //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
- oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
- oTest.setAttribute('htmlFor','fff')
- console.log(oTest.for);//undefined IE8及以下会报错缺少标识符
- console.log(oTest.htmlFor);//undefined
- console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
- console.log(oTest.getAttribute('htmlFor'));//fff
- console.log(oTest);
- //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
- </script>
- <div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
- <script type="text/javascript">
- var oTest = document.getElementById('test');
- oTest.removeAttribute('class'); //removeAttribute直接用class就可以了
- oTest.removeAttribute('for');
- oTest.removeAttribute('style');
- console.log(oTest);// <div id="test">123</div>
- </script>
属性节点
属性节点,有的叫特性节点,差不多一个意思;
属性节点的三个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属性包含以下四个方法:
- <div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
- <script type="text/javascript">
- var oTest = 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(typeof oTest.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}
- var abc = 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'
- </script>
attributes属性主要用于属性遍历。在需要将DOM结构序列化为HTML字符串时,多数都会涉及遍历元素特性
- <div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
- <script type="text/javascript">
- function outputAttributes(obj){
- var arr = [],
- attrName,
- attrValue,
- i;
- for(i = 0; i < obj.attributes.length; i++){
- attrName = obj.attributes[i].nodeName;
- attrValue = obj.attributes[i].nodeValue;
- arr.push(attrName + '=\"' + attrValue + '\"');
- }
- return arr.join(" ");
- }
- var oTest = document.getElementById('test');
- console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
- console.log(typeof oTest.attributes);//object
- console.log(outputAttributes(oTest));
- //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
- console.log(typeof outputAttributes(oTest));//string
- </script>
文本节点
文本节点的三个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本,其父节点 parentNode 指向包含该文本节点的元素节点,文本节点没有子节点;
关于文本节点,遇到最多的兼容问题是空白文本节点问题。IE8及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点 ;所以有时候我们需要清理空白文本节点;
输出[text, div, text],text表示空白文本节点 //IE8及以下浏览器输出[div],并不包含空白文本节点 console.log(oTest.childNodes.length); //3 //标准浏览器返回3 //IE8及以下浏览器返回1,并不包含空白文本节点 //清理空白文本节点 function cleanWhitespace(oEelement){ for(var i = 0; i < oEelement.childNodes.length; i++){ var node = oEelement.childNodes[i]; if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){ node.parentNode.removeChild(node); } } } cleanWhitespace(oTest); console.log(oTest.childNodes);//[div] console.log(oTest.childNodes.length); //1 </script>
- <div id="test">
- <div>hello world!</div>
- </div>
- <script type="text/javascript">
- var oTest = document.getElementById('test');
- //第一个和最后一个都是空白文本节点
- console.log(oTest.firstChild);//" "
- console.log(oTest.lastChild);//" "
- console.log(oTest.childNodes);//[text, div, text]
- //标准浏览器
文本节点属性:
- <div id="testData">hello world!</div>
- <div id="testWholeText">hello world!</div>
- <script type="text/javascript">
- var oTestData = document.getElementById('testData');
- //第一个和最后一个都是空白文本节点
- console.log(oTestData.firstChild);//"hello world!"
- console.log(typeof oTestData.firstChild);//object
- console.log(oTestData.childNodes.length); //1
- console.log(oTestData.firstChild.nodeValue);//"hello world!"
- console.log(typeof oTestData.firstChild.nodeValue);//string
- console.log(oTestData.firstChild.data);//"hello world!"
- //文本节点的data属性与nodeValue属性相同,都是 string 类型
- console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
- var oTestWholeText = document.getElementById('testWholeText');
- console.log(oTestWholeText.childNodes); //[text]
- console.log(oTestWholeText.childNodes.length); //1
- console.log(oTestWholeText.firstChild.wholeText);//hello world!
- console.log(oTestWholeText.firstChild.data);//hello world!
- 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);//hello world!
- //wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。
- console.log(oTestData.firstChild.length);//12
- console.log(oTestData.firstChild.nodeValue.length);//12
- console.log(oTestData.firstChild.data.length);//12
- </script>
文本节点方法:
文本节点的操作与字符串的操作方法相当类似。一般地,我们获取文本都用 innerHTML,然后再去字符串的操作方法去操作。
以上所述是小编给大家介绍的jacascript DOM节点——元素节点、属性节点、文本节点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!