元素节点
元素节点就是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及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点 ;所以有时候我们需要清理空白文本节点;
<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] //标准浏览器输出[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="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节点——元素节点、属性节点、文本节点,希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
JavaScript 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论