- HTML code
<div> <table></table> <div> <table></table> <div></div> <table></table> <div></div> </div> <table></table> <div> <table></table> <table></table> <table></table> <table></table> </div> <table></table> <div> <table></table> <table></table> <table></table> </div> </div>
依据节点的排序,上面有三层
实现:
从根节点中获取 tagNmae="DIV" 的子节点(第二层,共3个),获取之后判断: 如果第二层中tagNmae="DIV"的节点内,不包 tagName="DIV"的子节点(第三层),即子节点只有table,则设置这些table的display="inline"
结果是:第二层最后2个div内只有table标签,所以设置这两个div内table的display="inline"
使用js、Dom如何实现
问题二:
<div id="div1">
<table></table>
<table></table>
<table></table>
</div>
使用js、Dom 获取div对象后,如果批量设置它内部标签的css属性,如css样式中 #div1 table{display:inline;},而不用遍历它每个子项去设置。
document.getElementById("div1").style.....???
------解决方案--------------------
用jquery会是个不错的选择
------解决方案--------------------
- JScript code
var root_div = document.getElementById('div1'); var second_divs = root_div.children; for(var i = 0; i < second_divs.length; i++){ var second_div = second_divs[i]; if('div' === second_div.nodeName.toLowerCase()){ if(second_div.getElementsByTagName('table').length === second_div.children.length){ var three_divs = second_div.children; for(var j = 0; j < three_divs.length; j++){ three_divs[j].style.display = "inline"; } } } }