JS获取DOM节点的方法

通过id来获取dom节点

document.getElementById⽅法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null

通过标签名获取dom节点

document.getElementsByTagName⽅法搜索 HTML 标签名,返回符合条件的元素集合

通过class类名获取dom节点

document.getElementsByClassName⽅法返回包括了所有class名字符合指定条件的元素集合

获取父元素的子节点

获得第一个子节点

语法:document.getElementById(“test”).firstElementChild;
document.getElementById(“test”).firstChild;

获得最后一个子节点

语法:document.getElementById(“test”).lastElementChild;;
document.getElementById(“test”).lastChild;

<body>
    <div id="father">
        <h1>标题1</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>   
</body>
<script>//对应CSS选择器
//通过标签名,获取节点
var h1 = document.getElementsByTagName("h1");
//通过ID获取节点
var p1 = document.getElementById("p1");
var father = document.getElementById('father');
//通过ClassName类获取节点
var p2 = document.getElementsByClassName("p2");


var chiledrens=father.children;//获取父节点下面所有的子节点
//father.firstChild
//father.lastChild
</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值