DOM(Document Object Model):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
结点类型
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的关键字,并能作为属性名存在)
<script type="application/javascript"> //1.获取元素结点 //1)直接获取 // ① document.getElementById() function getEle1(){ var obj=document.getElementById("userid") console.log(obj) } // ② document.getElementsByName() function getEle2() { // 获取的是一个数组 var obj = document.getElementsByName("fav"); console.log(obj) } // ③ document.getElementsByTagName() function getEle3(){ var obj = document.getElementsByTagName("input"); console.log(obj); } function getEle4(){ var father = document.getElementById("regForm"); var sons = father.childNodes; // 获取指定位置 console.log(sons[1]); // firstChild 获取第一个 console.log(father.firstChild); // lastChild 获取最后一个 console.log(father.lastChild); } // 子父关系 parentNode function getEle5(){ var son = document.getElementById("userid"); console.log(son.parentNode) } // 兄弟关系 nextSibling 下一个对象 //previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素 function getEle6(){ var bro = document.getElementById("userid"); console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling); bro.previousSibling } function getField1(){ var obj = document.getElementById("nickid"); //console.log(obj.type); //将昵称的样式改为password //obj.type = "password"; var objval = obj.getAttribute("name"); console.log(objval); obj.setAttribute("abcd","5678"); obj.removeAttribute("type"); // 可以获取改变后的属性 console.log(obj.value) // 只能获取初始定义的属性 console.log(obj.getAttribute("value")); } // 1) 通过对象.innerText 获取标签内部的文本信息 function getText1(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv.innerText); } // 2) 通过对象.innerHTML 获取标签内部的HTML代码 function getText2(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv.innerHTML); } // 添加文本 function getText3(){ var myDiv = document.getElementById("myDiv"); myDiv.innerText = "<img src='https://www.jb51.net/article/1.jpg' />"; } // 添加代码 function getText4(){ var myDiv = document.getElementById("myDiv"); myDiv.innerHTML = "<img src='https://www.jb51.net/article/1.jpg' />"; } </script> </head> <body> <button>点我测试1</button> <button>点我测试2</button> <button>点我测试3</button> <button>点我测试4</button> <button>点我测试5</button> <button>点我测试6</button> <hr/> <button>属性测试1</button> <hr/> <button>文本测试1</button> <button>文本测试2</button> <button>文本测试3</button> <button>文本测试4</button> <hr/> <form> 用户名:<input type="text"><br/> 密码:<input type="password"><br/> 昵称:<input type="text" value="大名鼎鼎" abcd="1234" ><br/> 性别:男<input type="radio" value="nan"> 女<input type="radio" value="nv"><br/> 爱好:狗<input type="checkbox" value="dog"> 猫<input type="checkbox" value="cat"> 羊驼<input type="checkbox" value="yt"><br/> <input type="submit" value="注册"> </form> <div><b>hello</b></div> </body>
动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
<script type="application/javascript"> function changeDom1(){ var ipt=document.createElement("input"); } </script> <button>创建结点对象</button>
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)