导航:首页 > 编程语言 > 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用法相关的资料

热点内容
iphone5国际漫游设置 浏览:107
ipodwatch如何安装app 浏览:114
谁有微信抢红包的群号 浏览:872
word07页码从任意页开始 浏览:791
js禁止滑动事件 浏览:800
苹果查序号怎么看不是 浏览:61
linux在txt文件 浏览:568
ps如何导入文件匹配 浏览:201
转转app怎么把自己的账号租出去 浏览:828
福昕阅读器合并照片pdf文件 浏览:591
vhd文件有什么用 浏览:482
编程小朋友看什么书 浏览:623
经营如何让数据说话 浏览:258
如何在手机上升级opop 浏览:614
coreldrawx5免费视频教程 浏览:725
网站引导页面源码 浏览:234
个人简历范文word 浏览:220
uc下载的视频怎样提取到文件 浏览:499
英雄下载下载最新版本2015下载安装 浏览:433
NX深孔钻编程替换面如何操作 浏览:725

友情链接