如何在javascript中实现一个Dom操作

  • 时间:
  • 浏览:552
  • 来源:恰卡网

导读如何在javascript中实现一个Dom操作?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 结点类型 1.元素结点2.属性结...

如何在javascript中实现一个Dom操作?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

结点类型

1.元素结点2.属性结点3.文本结点

结点的注意点:

1.文本节点和属性结点都看作元素结点的子结点2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它3.结点的关系有:父子关系、兄弟关系

1.获取元素结点

1)直接获取

① document.getElementById()② document.getElementsByName()③ document.getElementsByTagName()

2)间接获取

父子关系firstChild lastChild childNodes

子父关系parentNode

兄弟关系nextSibling previousSibling

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);}//子父关系parentNodefunctiongetEle5(){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");
}



放大字体
添加样式
你好世界!

关于如何在javascript中实现一个Dom操作问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注恰卡网行业资讯频道了解更多相关知识。

猜你喜欢

accesstoken中怎么获取用户黑名单列表

这篇文章将为大家详细讲解有关accesstoken中怎么获取用户黑名单列表,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 公众号可登录

2021-07-29

Java中怎么利用轮询获取线程返回数据

Java中怎么利用轮询获取线程返回数据,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 1. 多线程的特点 一般程序中

2021-07-29

XamarinEssentials中怎么获取首选项的值

这期内容当中小编将会给大家带来有关XamarinEssentials中怎么获取首选项的值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 XamarinEssentials教程获取首

2021-07-29

jQuery中怎么获取内容和属性

这篇文章给大家介绍jQuery 中怎么获取内容和属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方

2021-07-29