❶ 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就可以了
因为那时候有三个并列的框,我需要输入一个然后跳下一个的 就写了个这个通用