JS结点(属性操作)隐藏与显⽰(display)
⽤JavaScript隐藏控件的⽅法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或
style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,⽽且被隐藏的控件不再占⽤显⽰时占⽤的位置,⽽“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。
<script language="JavaScript">
function displayHideUI()
{
var ui = ElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui = ElementById("bbs");
ui.style.display=" ";//display为空的话会好使,为block会使后边的空间换⾏
}
function visibilityHideUI()
{
var ui = ElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui = ElementById("bbs");
ui.style.visibility="visible";
}
</script>
值描述
none 此元素不会被显⽰。
js教程removechildblock 此元素将显⽰为块级元素,此元素前后会带有换⾏符。
inline 默认。此元素会被显⽰为内联元素,元素前后没有换⾏符。
inline-block ⾏内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显⽰。
run-in 此元素会根据上下⽂作为块级元素或内联元素显⽰。
compact CSS 中有值compact,不过由于缺乏⼴泛⽀持,已经从CSS2.1 中删除。
marker CSS 中有值marker,不过由于缺乏⼴泛⽀持,已经从CSS2.1 中删除。
table 此元素会作为块级表格来显⽰(类似<table>),表格前后带有换⾏符。
inline-table 此元素会作为内联表格来显⽰(类似<table>),表格前后没有换⾏符。
table-row-group 此元素会作为⼀个或多个⾏的分组来显⽰(类似<tbody>)。
table-header-group 此元素会作为⼀个或多个⾏的分组来显⽰(类似<thead>)。
table-footer-group 此元素会作为⼀个或多个⾏的分组来显⽰(类似<tfoot>)。
table-row 此元素会作为⼀个表格⾏显⽰(类似<tr>)。
table-column-group 此元素会作为⼀个或多个列的分组来显⽰(类似<colgroup>)。
table-column 此元素会作为⼀个单元格列显⽰(类似<col>)
table-cell 此元素会作为⼀个表格单元格显⽰(类似<td> 和<th>)
table-caption 此元素会作为⼀个表格标题显⽰(类似<caption>)
inherit 规定应该从⽗元素继承display 属性的值。
<script language="JavaScript">
<!--
function changeShowImage(n){
var cNodes = ElementsByClassName("mediumn_image");
console.log("22222");
console.log(cNodes);
for(var i=0;i<cNodes.length;i++){
console.log(cNodes[i]);
cNodes[i].style.display = "none";
}
var nNode = ElementById(n);
nNode.style.display = "";
}
//-->
</script>
接⼝nodeType常量nodeType值备注
Element Node.ELEMENT_NODE1元素节点
Text Node.TEXT_NODE3⽂本节点
Document Node.DOCUMENT_NODE9document
Comment Node.COMMENT_NODE8注释的⽂本DocumentFragment Node.DOCUMENT_FRAGMENT_NODE11document⽚断
Attr Node.ATTRIBUTE_NODE2节点属性
⽅法描述
createAttribute()⽤指定的名字创建新的Attr节点。
createComment()⽤指定的字符串创建新的Comment节点。
createElement()⽤指定的标记名创建新的Element节点。
createTextNode()⽤指定的⽂本创建新的TextNode节点。
getElementById()返回⽂档中具有指定id属性的Element节点。
getElementsByTagName()返回⽂档中具有指定标记名的所有Element节点。
属性描述
attributes如果该节点是⼀个Element,则以NamedNodeMap形式返回该元素的属性。
childNodes以Node[]的形式存放当前节点的⼦节点。如果没有⼦节点,则返回空数组。
firstChild以Node的形式返回当前节点的第⼀个⼦节点。如果没有⼦节点,则为null。
lastChild以Node的形式返回当前节点的最后⼀个⼦节点。如果没有⼦节点,则为null。
nextSibling以Node的形式返回当前节点的兄弟下⼀个节点。如果没有这样的节点,则返回null。下⼀个兄弟节点nodeName节点的名字,Element节点则代表Element的标记名称。
nodeType代表节点的类型。
parentNode以Node的形式返回当前节点的⽗节点。如果没有⽗节点,则为null。
previousSibling以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。上⼀个兄弟节点
⽅法描述
appendChild()通过把⼀个节点增加到当前节点的childNodes[]组,给⽂档树增加节点。
cloneNode()复制当前节点,或者复制当前节点以及它的所有⼦孙节点。
hasChildNodes()如果当前节点拥有⼦节点,则将返回true。
insertBefore()给⽂档树插⼊⼀个节点,位置在当前节点的指定⼦节点之前。如果该节点已经存在,则删除之再插⼊到它的位置。
removeChild()从⽂档树中删除并返回指定的⼦节点。
replaceChild()从⽂档树中删除并返回指定的⼦节点,⽤另⼀个节点替换它。