如何在javascript中实现一个Dom操作
如何在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的关键字,并能作为属性名存在)
动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
function changeDom2() { var father = document.getElementById("regForm"); var ipt = document.createElement("input"); ipt.type = "text"; father.appendChild(ipt); }
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
function changeDom3() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.insertBefore(newChild, refChild); }
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
function changeDom4() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.replaceChild(newChild, refChild); }
5)(父结点)删除旧子结点对象
function changeDom5() { var father = document.getElementById("regForm"); var refChild = document.getElementById("nickid"); father.removeChild(refChild); }
动态改变元素的CSS样式(不重要)
你好世界!
关于如何在javascript中实现一个Dom操作问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
新闻标题:如何在javascript中实现一个Dom操作
网址分享:http://pwwzsj.com/article/ipedss.html