JS 获取页面元素 创建元素节点和属性

一、获取页面元素

1、querySelector系列,使用css选择器来选择页面元素

例如:

①HTML代码

<p class="p1">1234568</p>
<p id="p2">1234568</p>

②script代码

var p2 = document.querySelector('#p2');
console.log(p2);

2、querySelectorAll 获取所有的元素

例如:

①HTML代码

<div class="box" >
    <p>1234568</p>
    <p class="p1">1234568</p>
    <p id="p2">1234568</p>
    <p class="p1">1234568</p>
    <p>1234568</p>
</div>

②script代码

var ps = document.querySelectorAll('.box p');
 console.log(ps);

这样就获取到了页面中所有的“p”元素。

二、创建元素节点和属性

1、创建页面元素

var h1 = document.createElement('h1');

2、创建文本节点

var h1_text = document.createTextNode('呵呵');

3、文本节点和页面元素产生关系

h1.appendChild(h1_text);

4、创建属性节点

var h1_align = document.createAttribute('align');

5、对属性节点赋值

h1_align.value = 'center';

 6、将属性节点与页面元素产生关系

h1.setAttributeNode(h1_align);

 7、将页面元素追加到body中

document.body.appendChild(h1);


h1.innerHTML = '呵呵呵';

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值