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 = '呵呵呵';