相关元素: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