JavaScript DOM-选取元素

选取DOM节点

document.body 访问body节点

document.all 访问所有的元素 返回集合

document.links 访问所有的链接 返回集合

document.images 访问所有的图片 返回集合

document.forms 访问所有的表单 返回集合

document.anchors 访问所有的锚点 返回集合

选取节点

document.getElementById()
通过 id 选取

<div id="menu"></div>
<script>
    let menuNode = document.getElementById('menu')
    console.log( menuNode )        // 节点对象
    // 也可以直接通过 id 操作, 因为兼容问题,所以不太推荐
    console.log( menu )
</script>

document.getElementsByName()

通过 name 属性值选取

<input type="text" name="uname" value="哈哈">
<script>
	let inputs = document.getElementsByName('uname')  // 返回一个类似
数组的集合
    
    console.log( inputs )      //  返回一个类似数组的集合
    console.log( inputs[0] )  //  集合中的第一个
</script>

document.getElementsByClassName()

通过类名选取

<div class="book"></div>
<script>
	let books = document.getElementsByClassName('book')
    console.log( books )    // 返回一个类似数组的集合
    console.log( books[0] ) // 集合中的每一个
</script>

document.getElementsByTagName()
通过标签名选取

<div></div>
<script>
	let divs = document.getElementsByTagName('div')
    console.log( divs )    // 返回一个类似数组的集合
    console.log( divs[0] ) // 集合中的第一个
</script>

另一种方式

document.querySelector( ) 只返回一个

let a1 = document.querySelector('#a1')  // 选择 id = a1 的
let b1 = document.querySelector('.b1')  // 选择所有class=b1元素中的第一个
let li = document.querySelector('li')   // 选择所有li标签中 的第一个
let aa = document.querySelector('div a') // 选中div标签中的 第一个a元
素

document.querySelectorAll( ) 返回所有

let imgs = document.querySelectorAll('img') // 选取所有的img元素

选取表单

document.表单name值

<form name='xxoo'>
	账号: <input type="text" name="uname">
	密码: <input type="password" name="upwd">
	<input type="submit" value="登录">
</form>
<script>
	document.xxoo         选取表单对象
	document.xxoo.uname   账号对象
	document.xxoo.upwd    密码对象
</script>