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

时间: 2024-08-09 07:25:52

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

js--document对象操作内容(js简短汇总2)

(四)操作内容 1.表单元素. 赋值:obj.value=""; 取值:var s = obj.value; 2.非表单元素. 赋值:obj.innerHTML = ""; 取值:var s = obj.innerHTML; 1. 一个文本框,一个按钮:文本框内输入文字,点击按钮,按钮上的文字转换成文本框内输入的文字 2. 同意与不同意两个单选按钮,下方一个提交按钮: 默认为不同意按钮,提交按钮不可点,为不可用:点击为同意按钮时,提交按钮可用. 3. 复选框选择,多

JS——操作内容、操作相关元素

操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来.var s = 普通元素.innerText; 值会把此元素下的文本取出来,标记不予理会. 表单元素 - 只能使用value 来取值赋值表单元素.value = "值";var s = 表单元素.value;

【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> 其中class   id   style   都是这个div的属性 <input type="button" value="这是一个按钮" disabled="disabled"  aa="haha" /> dis

2017-3-31 操作属性 定时器 操作内容 操作相关元素 元素创建添加删除

(一)操作属性 1.对象.setAttribute('属性名','属性值');  --- 添加属性 例子:把所有class为div的,字体改为30px: var a document.getElementById('div'); for(var i=o;i<a.length;i++){ a[i].setAttribute('style','font-size=30px');或者用a[i].style.fontSize='30px'; } 2.对象.getAttribute('属性名'); - 获

正则表达式--(js简短汇总5)

正则表达式验证: 邮箱.身份证号.邮编.电话.手机号 邮箱: 1.有且只能含有一个@. [email protected]后面至少有一个. 3.不能以@和.开头,不能以他们结尾. [email protected]和.之间必须至少有一个字符. 5.如果有多个.的话,它们之间不能靠在一起. 使用正则表达式验证的步骤: 1.写正则表达式. 2.取要验证的字符串的值. 3.使用字符串的match()方法来判断该字符串是否满足正则表达式. var reg = /^(\d{15}|\d{18})$/; /

JS控制伪元素的方法汇总

转载自:http://www.jb51.net/article/81984.htm 一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新

js最基础知识回顾2(函数传参,操作属性的第二种方式,提取行间事件,操作一组元素,this,焦点问题和鼠标按下抬起,选项卡)

一.函数传参     1.函数传参:参数就是占位符----函数里定不下来的东西 a. var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 f(); }; a(a1); b.  function skip(skipPath){  //换肤 var oLink1 = document.getElementById('link1'); oLink1.href=skipPath; } c.   function setStyle(na

相关元素操作

五.相关元素操作: var a = document.getElementById("id");找到a: var b = a.nextSibling,找a的下一个同辈元素,注意包含空格:(弟) var b = a.previousSibling,找a的上一个同辈元素,注意包含空格:(兄) var b = a.parentNode,找a的上一级父级元素:(父) var b = a.childNodes,找出来的是数组,找a的下一级子元素:(子) var b = a.firstChild,

20150423 DOM相关元素操作

相关元素:1.obj.nextSibling下一个元素(注意回车与空格)2.obj.previousSibling上一个元素(注意回车与空格)3.obj.parentNode父级元素.4.obj.childNodes所有的子级元 属性: obj.firstChild obj.lastChild obj.childNode[n] 方法: obj.appendChild(元素对象); //元素对象,不是一个HTML的字符串 d.insertBefore(要插入的元素对象,相对于哪个元素); d.re