導航:首頁 > 編程語言 > jsnextsibling用法

jsnextsibling用法

發布時間:2023-02-05 22:27:44

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就可以了
因為那時候有三個並列的框,我需要輸入一個然後跳下一個的 就寫了個這個通用

閱讀全文

與jsnextsibling用法相關的資料

熱點內容
編程如何讓人物重復發射子彈 瀏覽:853
db2查看錶空間文件 瀏覽:607
ps文件界面設置 瀏覽:779
c語言12位的數據應該怎麼存儲 瀏覽:953
將ape導入iphone 瀏覽:107
js組合快捷鍵 瀏覽:174
linux系統盤默認掛在的文件夾 瀏覽:667
淘寶數據包如何操作上架 瀏覽:567
vb編程中輸入cls是什麼意思 瀏覽:81
linuxtime服務 瀏覽:184
瘋狂安卓講義第二版代碼 瀏覽:420
老炮兒三小時版本下載 瀏覽:313
matlab怎麼調試程序 瀏覽:2
winxp升級win7的危害 瀏覽:496
網路沒連上卻不可用是怎麼回事 瀏覽:752
社區版本 瀏覽:738
怎麼查微信公眾號什麼時候開通的 瀏覽:717
安裝三菱編程閃退怎麼回事 瀏覽:488
手機怎麼創建word文件格式 瀏覽:694
c語言連接資料庫 瀏覽:887

友情鏈接