如何在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的关键字，并能作为属性名存在）
<scripttype="application/javascript">
//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="<imgsrc='1.jpg'/>";
}
//添加代码
functiongetText4(){
varmyDiv=document.getElementById("myDiv");
myDiv.innerHTML="<imgsrc='1.jpg'/>";
}
</script>
</head>
<body>
<buttononclick="getEle1();">点我测试1</button>
<buttononclick="getEle2();">点我测试2</button>
<buttononclick="getEle3();">点我测试3</button>
<buttononclick="getEle4();">点我测试4</button>
<buttononclick="getEle5();">点我测试5</button>
<buttononclick="getEle6();">点我测试6</button>
<hr/>
<buttononclick="getField1();">属性测试1</button>
<hr/>
<buttononclick="getText1();">文本测试1</button>
<buttononclick="getText2();">文本测试2</button>
<buttononclick="getText3();">文本测试3</button>
<buttononclick="getText4();">文本测试4</button>
<hr/>
<formid="regForm">
用户名：<inputid="userid"type="text"name="username"><br/>
密码：<inputtype="password"name="password"><br/>
昵称：<inputid="nickid"type="text"name="nickname"value="大名鼎鼎"abcd="1234"><br/>
性别：男<inputtype="radio"name="gender"value="nan">
女<inputtype="radio"name="gender"value="nv"><br/>
爱好：狗<inputtype="checkbox"name="fav"value="dog">
猫<inputtype="checkbox"name="fav"value="cat">
羊驼<inputtype="checkbox"name="fav"value="yt"><br/>
<inputtype="submit"value="注册">
</form>
<divid="myDiv"><b>hello</b></div>
</body>动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
<scripttype="application/javascript">
functionchangeDom1(){
vaript=document.createElement("input");
}
</script>
<buttononclick="changeDom1();">创建结点对象</button>2)（父结点）追加子结点对象
fatherNode.appendChild(子结点对象)
functionchangeDom2(){
varfather=document.getElementById("regForm");
vaript=document.createElement("input");
ipt.type="text";
father.appendChild(ipt);
}
<buttononclick="changeDom2();">追加子结点对象</button>3)（父结点）在指定结点前添加子结点
fatherNode.insertBefore(新结点对象，参考结点对象)
functionchangeDom3(){
varfather=document.getElementById("regForm");
varrefChild=document.getElementById("brid");
varnewChild=document.createElement("input");
newChild.type="text";
father.insertBefore(newChild,refChild);
}
<buttononclick="changeDom3();">插入子结点对象</button>4)（父结点）替换旧的子结点对象
fatherNode.replaceChild(新结点对象，旧结点对象)
functionchangeDom4(){
varfather=document.getElementById("regForm");
varrefChild=document.getElementById("brid");
varnewChild=document.createElement("input");
newChild.type="text";
father.replaceChild(newChild,refChild);
}
<buttononclick="changeDom4();">替换子结点对象</button>5)（父结点）删除旧子结点对象
functionchangeDom5(){
varfather=document.getElementById("regForm");
varrefChild=document.getElementById("nickid");
father.removeChild(refChild);
}
<buttononclick="changeDom5();">删除子结点对象</button>动态改变元素的CSS样式（不重要）
<styletype="text/css">
.addstyle{
color:red;
font-size:72px;
text-decoration:underline;
}
</style>
<scripttype="application/javascript">
/*
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");
}
</script>
</head>
<body>
<buttononclick="fontGreater()">放大字体</button>
<buttononclick="changeFont()">添加样式</button>
<divid="myDiv">你好世界！</div>
</body>关于如何在javascript中实现一个Dom操作问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。
