document--操作相关元素(js简短汇总3)

相关元素:obj为当前选定元素,用id获取;script全部放在html后面

1.obj.nextSibling下一个元素(注意回车与空格)

技术分享

2.obj.previousSibling上一个元素(注意回车与空格)

技术分享

3.obj.parentNode父级元素。可以改变整体的格式style,内容方面不做改变。

技术分享

4.obj.childNodes所有的子级元  

属性:

body内的内容:

 <body>
<div>
<div>aaa</div><div id="dd">bbbb<span>eeeeee</span><div>fffffff</div></div><div>ccccc</div>
</div>
</body>

obj.firstChild //父级div层中已确定改变第一个子集  

/*
var b=document.getElementById("dd");
b.lastChild.style.backgroundColor="pink";//最后
b.firstChild.style.backgroundColor="red";//第一
//寻找id="dd"的div层中;已确定的最后一个子集 或 第一个子集 改变其属性
*/

obj.lastChild  //父级div层中已确定改变最后一个子集  

obj.childNode[n]//父级中查找所有子集  

/* var b=document.getElementById("dd"); var zj=b.childNodes; alert(zj.length); //寻找id="dd"的div层有几个子集 */

/* var b=document.getElementById("dd"); var zj=b.getElementsByTagName("div"); alert(zj.length); //寻找id="dd"的div层中有几个div标签 */

/* var b=document.getElementById("dd"); b.innerHTML="";//将id="dd"的div层清空 */

/* var b=document.getElementById("dd"); var zj=b.getElementsByTagName("div");//查出结果为数组 zj[0].style.backgroundColor="yellow"; //寻找id="dd"的div层中是div标签的背景变为黄色 */

/* var b=document.getElementById("dd"); var zj=b.childNodes; for(var i=0;i<zj.length;i++) {  if(zj[i].tagName=="DIV")//此处tagName为标签名,必须是大写  {zj[i].style.backgroundColor="blue";} }//寻找id="dd"的div层中是div标签的背景变为蓝色 */

 

方法:  

obj.appendChild(元素对象); //追加元素对象,不是一个HTML的字符串  

/*
//追加div层
var b=document.getElementById("dd");//寻找id="dd"的div
var n=document.createElement("div");//创建一个新的div层
n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本
b.appendChild(n);//给id="dd"的div层以子集方式追加新创建的div层
*/

 

d.insertBefore(要插入的元素对象,相对于哪个元素);                

//上方的d--代表其父级,在父级div层的内部,先写插入的层,在写对应的想显示其前方的对象  

/*
var b=document.getElementById("dd");//寻找id="dd"的div
var n=document.createElement("div");//创建一个新的div层
n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本
b.insertBefore(n,b.childNodes[0]);
//上方的b--代表其父级,在父级div层的内部,先写插入的层,在写对应的想显示其前方的对象
*/

 

d.removeChild(要移除的元素对象);//移除在父级div层内的相应子集div层  

 

/*
var b=document.getElementById("dd");//寻找id="dd"的div
b.removeChild(b.childNodes[0]);
//移除在父级div层内的相应子集div层
*/

 

d.replaceChild(新元素,旧元素);                //上方的d--代表其父级,在父级div层的内部,先写替换内容的层,再写要被替换的对象

/*
var b=document.getElementById("dd");//寻找id="dd"的div
var th=document.createElement("div");//创建新的div层
th.innerHTML="这是一个要替换的div层!";//给新创建的div层设置文本
b.replaceChild(th,b.childNodes[0]);
//上方的b--代表其父级,在父级div层的内部,先写替换内容的层,再写要被替换的对象
*/

 

 

 

 d.getElementsByxxx("id字符串");在子元素中找符合条件的元素。

 

 

如何在子级中找指定的元素?

1.遍历  2.obj.getElementsByxxxxx;

如何向元素中追加一个子元素?

(一)

1.造个元素。

var n = document.createElement("div");  //造元素

n.innerHTML = "this is a new div"; //设内容

n.style.backgroundColor="green"; //设样式

2.加进去。 d.appendChild(n); 

(二)

var b=document.getElementById("dd");//寻找id="dd"的div

var n=document.createElement("div");//创建一个新的div层

n.innerHTML="这是一个增加的div层!";//给新创建的div层设置文本

b.appendChild(n);//给id="dd"的div层以子集方式追加新创建的d

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。