了解javascript中的Dom操作
DOM(DocumentObjectModel):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
结点类型
1.元素结点
2.属性结点
3.文本结点
结点的注意点:
1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系
1.获取元素结点
1)直接获取
①document.getElementById()
②document.getElementsByName()
③document.getElementsByTagName()
2)间接获取
父子关系
firstChildlastChildchildNodes
子父关系
parentNode
兄弟关系
nextSiblingpreviousSibling
2.操作属性结点
1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值
2)getAttribute("key")setAttribute("key","value")removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值
3.处理文本结点
1)通过对象.innerText获取标签内部的文本信息
2)通过对象.innerHTML获取标签内部的HTML代码
4.动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)
5.动态改变元素的CSS样式(不重要)
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
//1.获取元素结点 //1)直接获取 //①document.getElementById() functiongetEle1(){ varobj=document.getElementById("userid") console.log(obj) } //②document.getElementsByName() functiongetEle2(){ //获取的是一个数组 varobj=document.getElementsByName("fav"); console.log(obj) } //③document.getElementsByTagName() functiongetEle3(){ varobj=document.getElementsByTagName("input"); console.log(obj); } functiongetEle4(){ varfather=document.getElementById("regForm"); varsons=father.childNodes; //获取指定位置 console.log(sons[1]); //firstChild获取第一个 console.log(father.firstChild); //lastChild获取最后一个 console.log(father.lastChild); } //子父关系parentNode functiongetEle5(){ varson=document.getElementById("userid"); console.log(son.parentNode) } //兄弟关系nextSibling下一个对象 //previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素 functiongetEle6(){ varbro=document.getElementById("userid"); console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling); bro.previousSibling } functiongetField1(){ varobj=document.getElementById("nickid"); //console.log(obj.type); //将昵称的样式改为password //obj.type="password"; varobjval=obj.getAttribute("name"); console.log(objval); obj.setAttribute("abcd","5678"); obj.removeAttribute("type"); //可以获取改变后的属性 console.log(obj.value) //只能获取初始定义的属性 console.log(obj.getAttribute("value")); } //1)通过对象.innerText获取标签内部的文本信息 functiongetText1(){ varmyDiv=document.getElementById("myDiv"); console.log(myDiv.innerText); } //2)通过对象.innerHTML获取标签内部的HTML代码 functiongetText2(){ varmyDiv=document.getElementById("myDiv"); console.log(myDiv.innerHTML); } //添加文本 functiongetText3(){ varmyDiv=document.getElementById("myDiv"); myDiv.innerText=" "; } //添加代码 functiongetText4(){ varmyDiv=document.getElementById("myDiv"); myDiv.innerHTML=" "; } 点我测试1 点我测试2 点我测试3 点我测试4 点我测试5 点我测试6
属性测试1
文本测试1 文本测试2 文本测试3 文本测试4
用户名:
密码:
昵称:
性别:男女
爱好:狗猫 羊驼
hello
动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
functionchangeDom1(){ vaript=document.createElement("input"); } 创建结点对象
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
functionchangeDom2(){ varfather=document.getElementById("regForm"); vaript=document.createElement("input"); ipt.type="text"; father.appendChild(ipt); }追加子结点对象
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
functionchangeDom3(){ varfather=document.getElementById("regForm"); varrefChild=document.getElementById("brid"); varnewChild=document.createElement("input"); newChild.type="text"; father.insertBefore(newChild,refChild); }插入子结点对象
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
functionchangeDom4(){ varfather=document.getElementById("regForm"); varrefChild=document.getElementById("brid"); varnewChild=document.createElement("input"); newChild.type="text"; father.replaceChild(newChild,refChild); }替换子结点对象
5)(父结点)删除旧子结点对象
functionchangeDom5(){ varfather=document.getElementById("regForm"); varrefChild=document.getElementById("nickid"); father.removeChild(refChild); }删除子结点对象
动态改变元素的CSS样式(不重要)
.addstyle{ color:red; font-size:72px; text-decoration:underline; } /* 5.动态改变元素的css样式 1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称 2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在) */ functionfontGreater(){ varmyDiv=document.getElementById("myDiv"); console.log(myDiv); myDiv.style.fontSize="36px"; myDiv.style.fontFamily="宋体"; } functionchangeFont(){ varmyDiv=document.getElementById("myDiv"); myDiv.className="addstyle"; //myDiv.setAttribute("class","addstyle"); } 放大字体 添加样式 你好世界!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。