初式识Dom
1、改变body的背景色
方式1：
<body>
<input type="text" id="username">
<input type="text" id="age" name="">
</body>
<script>
//获取body
let bodyObject=document.body
//打印body的详细介绍
console.dir(bodyObject)
//方式1：改变body的背景色
bodyObject.style.backgroundColor='green'
</script>
效果图：
方式2：
<body>
<input type="text" id="username">
<input type="text" id="age" name="">
</body>
<script>
// 获取body
let bodyObject=document.body
// 方式2：
bodyObject.bgColor="red"
</script>
效果图：
2、获取子节点 用childNodes
<body>
<input type="text" id="age" value="zhangsan">
<input type="text" id="username" name="李四">
<span>aaaaaaaaaaaa</span>
<div name="title">
hello
</div>
<div>
how
</div>
<p name="title">
pp
</p>
<p name="content">
ppp
</p>
</body>
<script>
//获取子节点（一般不常用）
let bodyObject=document.body
let childNodes= bodyObject.childNodes
</script>
3、获取子元素节点 用children
<body>
<input type="text" id="age" value="zhangsan">
<input type="text" id="username" name="李四">
<span>aaaaaaaaaaaa</span>
<div name="title">
hello
</div>
<div>
how
</div>
<p name="title">
pp
</p>
<p name="content">
ppp
</p>
</body>
<script>
//获取子元素节点 注意：HTMLCollection是一个伪数组
let bodyObject=document.body
let children=bodyObject.children
console.dir(children)//我们的预期结果是HTMLCollection （它是一个伪数组）
</script>
为什么会说HTMLCollection 是个伪数组呢？我们来验证一下，看看它到底是不是 伪数组？
//判断HTMLCollection是不是数组的实例。是就输出true，不是就输出：false
let bodyObject=document.body
let children=bodyObject.children
let r=Array.isArray(children)
console.dir(r)
运行结果：
练习：假如只允许你改变input标签的外观样式，怎么做？
<body>
<input type="text" id="age" value="zhangsan">
<input type="text" id="username" name="李四">
<span>aaaaaaaaaaaa<
最低0.47元/天 解锁文章
4905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
