js_dom02
0、
1、.获取元素结点
2、操作属性结点
3、处理文本结点
0、
<form id="f2" >
<span id="spanid">1000</span>
</form>
结果：form的子节点：NodeList(3) [text, span#spanid, text]
text: data: "↵ "
span#spanid: 子节点：text ；text: data:1000
text: data: "↵"
1、.获取元素结点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
/*
1.获取元素结点
1)直接获取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)间接获取
父子关系
firstChild lastChild childNodes
子父关系
parentNode
兄弟关系
nextSibling previousSibling
function getEle01(){
var d=document.getElementById("userid");
console.log(d)
}
function getEle02(){
var d=document.getElementsByName("gender");
console.log(d)
}
function getEle03(){
var d =document.getElementsByTagName("input");
console.log(d)
}
function getEle04(){
var d =document.getElementById("smform")
console.log(d.childNodes)
}
function getEle05(){
var d=document.getElementById("smform")
console.log(d.firstChild)
}
function getEle06(){
var d =document.getElementById("smform")
console.log(d.lastChild)
}
function getEle07(){
var d=document.getElementById("userid")
console.log(d.parentNode)
}
function getEle08() {
var d = document.getElementById("userid")
console.log(d.nextSibling)
console.log(d.previousSibling)
}
</script>
</head>
<body>
<!--页面显示中：如果html文件有多个空格，则显示一个空格，如果文件有换行符（就是按了enter键）
页面不换行。（换行用<br />），而文本节点的内容会包括换行和多个空格等特殊字符。
-->
<button type="button" onclick="getEle01();">点击测试01</button>
<button type="button" onclick="getEle02();">点击测试02</button>
<button type="button" onclick="getEle03();">点击测试03</button>
<button type="button" onclick="getEle04();">点击测试04</button>
<button type="button" onclick="getEle05();">点击测试05</button>
<button type="button" onclick="getEle06();">点击测试06</button>
<button type="button" onclick="getEle07();">点击测试07</button>
<button type="button" onclick="getEle08();">点击测试08</button>
<form id ="smform">
用户名：<input id="userid" type="text" name="username" abcd="aaa"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
2、操作属性结点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
/*
2.操作属性结点
1)通过对象“.”属性，来操作属性
优：可以动态获取用户修改的属性值
缺：不能获取自定义属性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优：可以获取自定义属性的值
缺：不能动态获取用户修改的属性值
*/
function operField01(){
var d =document.getElementById("userid")
d.type="password"
console.log(d.value)//可以动态获取属性值
console.log(d.abcd)//undefined 不能获取自定义的属性值
}
function operField02(){
var d =document.getElementById("userid")
console.log(d.getAttribute("type"))//获取属性值
d.setAttribute("type","password")
d.removeAttribute("name")
console.log(d)
console.log(d.getAttribute("abcd"))//可以得到自定义的属性值
//d.setAttribute("value","aaa")
console.log(d.getAttribute("value"))//不能动态获取属性值。如果使用setAttribute("key","value")设置了属性值
// 则得到的是value值，如果是通过d.key="value"或用户动态输入的话只会得到null
}
</script>
</head>
<body>
<button type="button" onclick="operField01();">点击操作属性01</button>
<button type="button" onclick="operField02();">点击操作属性02</button>
<form id ="smform">
用户名：<input id="userid" type="text" name="username" abcd="aaa"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
3、处理文本结点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
/*
3.处理文本结点
1) 通过对象.innerText 获取标签内部的文本信息
2) 通过对象.innerHTML 获取标签内部的HTML代码
*/
function operateText01(){
var d=document.getElementById("mydiv")
d.innerText="hehehehe"
console.log(d.innerText)//hehehehe
}
function operateHTML01(){
var d=document.getElementById("mydiv")
console.log(d.innerHTML) //<b>hahahaha</b>
}
function operateText02(){
var d=document.getElementById("mydiv")
d.innerText="<img src='1.jpg'>"
}
function operateHTML02(){
var d=document.getElementById("mydiv")
d.innerHTML="<img src='1.jpg'>"
}
</script>
</head>
<body>
<button type="button" onclick="operateText01();">点击操作文本01</button>
<button type="button" onclick="operateHTML01();">点击操作HTML01</button>
<button type="button" onclick="operateText02();">点击操作文本02</button>
<button type="button" onclick="operateHTML02();">点击操作HTML02</button>
<form id ="smform">
用户名：<input id="userid" type="text" name="username" abcd="aaa"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
<div id="mydiv"><b>hahahaha</b></div>
</body>
</html>
