❶ js為checkbox的nextSibling.nodeValue設置文字顏色
document.getElementsByName('radio1').item(0).nextSibling.style.color='red';
❷ 怎麼用js在某個元素節點中添加元素
第一種
function insertEle() { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div"); var reforeNode = document.getElementById("p1"); newNode.innerHTML = " This is a newcon "; oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素節點插入id為P1節點元素的後面。 }
第二種// 自定義函數向後插入function insertAfter( newElement, targetElement){ var parent = targetElement.parentNode; if ( parent.lastChild == targetElement ) { // 如果最後的節點是目標元素,則直接添加。因為默認是最後 parent.a( newElement ); } else { //如果不是,則插入在目標元素的下一個兄弟節點的前面。也就是目標元素的後面 parent.insertBefore( newElement, targetElement.nextSibling ); }}
❸ 請問在JS裡面這句話是什麼意思 var ulobj = this.nextElementSibling||this.nextSibling;
this.nextElementSibling存在則將this.nextElementSibling賦給ulobj,
不存在則將this.nextSibling賦給ulobj
給個例子:
vara='1',b='2';
alert(a||b)返回1
這時候你將a=null
再次alert(a||b)發現返回的是2
❹ js中AppendChild與insertBefore的用法詳細解析
appendChild定義
appendChild(newChild:
Node)
:
Node
Appends
a
node
to
the
childNodes
array
for
the
node.
Supported:
IE
5.0+,
Mozilla
1.0+,
Netscape
6.0+,
Safari
1.0+,
Opera
7.0+
添加一個節點到指定的節點的子節點數組中,讀起來好象有點拗口,簡單地說就是將元素添加到指定的節點中
appendChild用法
target.appendChild(newChild)
newChild作為target的子節點插入最後的一子節點之後
appendChild例子
var
newElement
=
document.Document.createElement('label');
newElement.Element.setAttribute('value',
'Username:');
var
usernameText
=
document.Document.getElementById('username');
usernameText.appendChild(newElement);
insertBefore定義
The
insertBefore()
method
inserts
a
new
child
node
before
an
existing
child
node.
insertBefore()
方法的作用是:在現有的子節點前插入一個新的子節點
insertBefore用法
target.insertBefore(newChild,existingChild)
newChild作為target的子節點插入到existingChild節點之前
existingChild為可選項參數,當為null時其效果與appendChild一樣
insertBefore例子
var
oTest
=
document.getElementById("test");
var
newNode
=
document.createElement("p");
newNode.innerHTML
=
"This
is
a
test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
好了那麼有insertBefore的應該也有insertAfter吧?
好那我們來用Aptana編寫一個例子吧,但Aptana的智能提示告訴我其實沒有insertAfter這個方法
那麼就自己定義一個羅:)
insertAfter定義
function
insertAfter(newEl,
targetEl)
{
var
parentEl
=
targetEl.parentNode;
if(parentEl.lastChild
==
targetEl)
{
parentEl.appendChild(newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
insertAfter用法與例子
var
txtName
=
document.getElementById("txtName");
var
htmlSpan
=
document.createElement("span");
htmlSpan.innerHTML
=
"This
is
a
test";
insertAfter(htmlSpan,txtName);
將htmlSpan
作為txtName
的兄弟節點插入到txtName
節點之後
總結:
1、appendChild和insertBefore是做對節點的方法來使用的,而insertAfter只是自定義的一個函數
2、insertBefore相對於appendChild來說,比較靈活可以將新的節點插入到目標節點子節點數組中的任一位置。
3、使用appendChild和insertBefore來插入新的節點前提是,其兄弟節點必須有共同的父節點
❺ js 中怎麼獲取某個標簽後面的標簽
用原生js的話可以用nextSibling,不過需要判斷獲取到的節點是不是標簽元素,因為有可能你獲取到的實際是2個標簽之間的空格。
例如:<span id="sp_1"></span><span id="sp_2"></span>
用var span1=document.getElementById('sp_1');獲取到第一個標簽後,再
var span2=span1.nextSibling;
while(span2.nodeType != 1){ span2=span2.nextSibling;}這樣循環知道找到nodeType為1的節點(即是下個標簽)。
❻ javascript問題。如圖:用戶名欄,當我點擊點擊用戶名欄是後面提示:用戶名由3到15個字元組成,
給文本框綁定onfocus事件處理函數和onblur事件處理函數,在前面的函數中處理你要顯示的提示信息,在後面的函數中檢查控制項值並根據情況給出相關提示.比如:
<input type="text" onfocus="javascript:this.nextSibling.innerHTML='用戶名由3到15個字元組成';" onblur="javascript:this.nextSibling.innerHTML=this.value.length<3?'用戶名不得小於3個字元':'';"><span></span>
❼ 如何用js去除元素之間的空格
取出兩個undefined是因為在ff中,會將元素內的換行當成一個空的文本節點來處理。
有兩種辦法可以忽略掉空的文本節點:
第一種,根據nodeType過濾掉空文本節點:
functiongetFirstChild(parent){
if(parent&&parent.nodeType=='1'){
varnode=parent.firstChild;
while(node.nodeType!=1){
node=node.nextSibling;
}
returnnode;
}
}
第二種辦法,用children[0]獲取第一個節點,比如:
<divid="c">
<span>firstspan</span>
</div>
document.getElementById('c').children[0]取到的就是第一個span。
另外,children在IE中會將注釋當作節點包含在內,需要注意一下,比如下面這種結構:
<div id="c">
<!-- this is comment -->
<span>Span<span>
</div>
在IE中使用document.getElementById('c').children[0],獲取到的是<!-- this is comment -->,而不是<span>Span</span>。
nodeType返回值代表的含義:
返回值節點類型
1 Element元素節點
2 Attr 屬性節點
3 Text 文本節點
4 CDATASection <![CDATA[]]>
5 EntityReference 文檔中的實體引用部分
6 Entity 文檔中的實體
7ProcessingInstruction 處理指令
8Comment注釋
9Document整個文檔(文檔根節點)
10 DocumentType向為文檔定義的實體提供介面
11 DocumentFragment 輕量級的 Document 對象,能夠容納文檔的某個部分
12 Notation 代表 DTD 中聲明的符號
各類節點的子節點:
節點類型子節點類型
1 1、3、4、5、7、8
23、5
3無子節點
4無子節點
51、3、4、5、7、8
61、3、4、5、7、8
7無子節點
8無子節點
91、7、8、10
10 無子節點
11 1、3、4、5、7、8
12 無子節點
❽ javascript如何在div的後面添加一個其他的元素
//1、首先獲取div的父節點
//2、創建一個新節點
//3、將新節點添加到div節點後面
//具體操作如下:
var divs = document.getElementsByTagName("DIV");//獲取頁面中所有div
for(var i=0; i<divs.length; i++) {
var div = divs[i];//獲取第i個div
var divParent = div.parentNode;//獲取該div的父節點
var newNode = document.createTextNode("文本節點");//創建文本節點
var next = div.nextSibling;//獲取div的下一個兄弟節點
//判斷兄弟節點是否存在
if(next) {
//存在則將新節點插入到div的下一個兄弟節點之前,即div之後
divParent.insertBefore(newNode,next);
} else {
//不存在則直接添加到最後,appendChild默認添加到divParent的最後
divParent.appendChild(newNode);
}
}
//以下是一些常用js操作
var textNode = document.createTextNode("xxx");//創建文本節點
var elementNode = document.createElement("p");//創建元素節點(p)
var body = document.getElementsByTagName("body")[0];//獲取body節點
body.appendChild(elementNode);//元素節點添加到body節點下,添加在末尾
elementNode.appendChild(textNode);//將文件節點添加到元素節點下
//獲取要刪除的節點,elementNode.length-1 表示最後一個指定節點(這里表示最後一個p節點)
var delElementNode = elementNode.item(elementNode.length-1);
body.removeChild(delElementNode);//移除指定節點
body.insertBefore(newNode, oldNode);//在body中的oldNode前插入newNode節點
body.replaceChild(newNode, oldNode);//將body中的oldNode替換為newNode節點
//創建一個新的屬性
var style = document.createAttribute("style");
//為節點添加新屬性
option.attributes.setNamedItem(style);
//設置新屬性的值
option.setAttribute("style","color:red");
❾ nextsibling 是什麼意思
nextSibling 屬性可返回某個元素之後緊跟的元素(處於同一樹層級中)。
❿ js 如何實現輸完了一個文本框後再自動換下一個文本框,文本框裡面的值不限定大小。
function _autochange(len,th){
if(th.value.length==len)
{
var next = th.nextSibling.nextSibling;
next.focus();
}
}
這是我以前寫的一個類似的東西 不知道是不是你想要的。
其中參數len代表你要輸入多少個字元才換,th你傳個this就可以了
因為那時候有三個並列的框,我需要輸入一個然後跳下一個的 就寫了個這個通用