浅谈JavaScript的Document节点操作页面元素
Document节点操作页面元素
(1)选中页面元素
(2)创建页面元素
(3)操作页面元素属性
document中提供了很多方法用来选中页面的元素
【querySelector()】
方法返回匹配指定的CSS选择器的元素节点。
如果有多个节点满足匹配条件则返回第一个匹配的节点。
如果没有发现匹配的节点则返回null。
<ul>
<li name=“a1” id=“id1” class=“item”>夏侯惇</li>
<li name=“a2” class=“item”>妲己</li>
<li name=“a3” class=“item”>亚瑟</li>
</ul>
<script>
var item= document.querySelector(".item")
console.log(item.innerHTML)
</script>//夏侯惇
ps：querySelector是匹配的选择器，那么如果是选择器为id时参数应该是"#id名"
还有一些其他选择元素方式：
【getElementById()】返回匹配指定ID属性的元素节点
【getElementsByTagName()】返回所有指定标签的元素
【getElementsByClassName()】//返回符合指定类名的所有元素
【getElementsByName()】 用于选择拥有name属性的HTML元素
ps：必须保证在执行选中元素操作之前，元素已经被创建完毕！！
创建页面元素节点、属性
【createElement()】生成html元素节点
语法：document.createElement("标签名");
var newp = document.createElement(“p”);
document.body.appendChild(newp);
因为直接创建一个按钮根本没办法直观看到，因此通过.appendChild方式添加到body当中。.appendChild()方法的作用能够将代码创建的元素添加到指定位置。
但是这样创建的元素并没有内容，也不存在属性，在页面开发的过程中实用性是极差的。因此如果需要创建一个带有内容或者带有属性的元素就需要用到下面的两个方法来配合。
【createTextNode()】生成文本节点，参数为所要生成的文本节点的内容
var newp = document.createElement(“p”);
var p_text = document.createTextNode(“这是p的文本节点内容”);
newp.appendChild(p_text);
document.body.appendChild(newp);
【createAttribute()】生成一个新的属性对象节点，并返回它
var newp = document.createElement(“p”);
var p_text = document.createTextNode(“夏侯惇");
newp.appendChild(p_text);
var p_style = document.createAttribute("style");
p_style.value = "color:red;";
newp.setAttributeNode(p_style);
document.body.appendChild(newp);
说了这么多，让我们来进行doucment节点练习： 1. 创建一个内容居中的标题 2. 创建一个横向布局的导航栏
<ul>
<li>百度一下</li>
<li>新浪一下</li>
<li>雅虎一下</li>
<li>谷歌一下</li>
</ul>
<script>
//准备数据源 就是li的内容
var data = ["百度","Google","Bing","雅虎","360","华为云"]
//创建ul
var ul = document.createElement('ul');
//设置ul样式
var ul_style = document.createAttribute('style');
ul_style.value = 'list-style: none;';
//样式与ul产生关系
ul.setAttributeNode(ul_style);
for (var i = 0; i < data.length; i++) {
//创建li
var ul_li = document.createElement('li');
//设置li的样式
var ul_li_style = document.createAttribute('style');
ul_li_style.value = 'float: left; width: 100px;height: 40px;line-height: 40px; text-align: center; cursor: pointer;';
//样式和li产生关系
ul_li.setAttributeNode(ul_li_style);
//将文字赋值给li
ul_li.innerHTML = data[i];
//将li追加到ul中
ul.appendChild(ul_li);
}
//将ul添加到body内
document.body.appendChild(ul);
</script>
效果如下：
操作页面元素属性
CSS与JavaScript是两个有着明确分工的领域。前者负责页面的视觉效果，后者负责与用户的行为互动。但是它们毕竟同属网页开发当中的技术，因此不可避免有着交叉和互相配合。
所以在整体页面布局的过程中我们推荐使用html+css的方式来编写页面的结构和样式。在细节以及交互模块的编写过程中我们推荐使用js的方式来辅助编写。
很显然对于整个html页面来说，css部分所代表的样式就显得更为重要一些。因为这些样式能够决定我们的页面整体显示效果。因此js中也提供了几种操作页面元素属性的方法：
【元素节点特性方法getAttribute()、setAttribute()和removeAttribute() 】
【元素节点的style属性】
【元素节点的style属性的cssText写法】
【元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty()】
【元素节点特性方法getAttribute()、setAttribute()和removeAttribute() 】
操作Element节点的CSS样式，最简单的方法之一就是使用节点对象的getAttribute方法、setAttribute方法和removeAttribute方法，读写或删除HTML元素的style属性。
语法：getAttribute('属性名');
setAttribute('属性名','属性值');
removeAttribute('属性名');
var div1 = document.querySelector("div");
div1.setAttribute('style','width:200px; height:200px;
background-color:red; border:1px solid black;');
console.log(div1.getAttribute('style'));
div1.removeAttribute('style'); 【元素节点的style属性】
Element节点本身还提供style属性，用来操作CSS样式。style属性指向一个对象，用来读写页面元素的行内CSS样式。
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.cssFloat = 'left'; 元素的style对象对应元素的style属性，style对象中的样式与元素style属性中的样式名是一一对应的，但是需要一点点改写规则:
a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”
c.style对象的属性值都是字符串，而且包括单位。
【元素节点的style属性的cssText写法】
style对象的cssText属性可以用来读写或删除整个style属性。因此刚才的写法可以改写成：
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.cssFloat = 'left';
divStyle.cssText = 'background-color:red;border:1px solid black;height:100px;width:100px;'; ps：删除整个style属性可以用(divStyle.cssText='' '';)这种写法。
cssText对应的是HTML元素的style属性，所以不用改写CSS属性名。
【元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty() 】
style对象提供了三个方法来读写行内css规则：
setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。
这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。
var divStyle = document.querySelector('div').style;
divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty(‘background-color’); 提问：如果想要获取一个div的class属性的值，有哪些办法能够实现？
var div1 = document.querySelector("div");
div1.setAttribute('style','width:200px; height:200px; background-color:red; border:1px solid black;');
div1.setAttribute('class',‘a');
var class1 = div1.getAttribute('class');
console.log(class1);
var class2 = div1.className;
console.log(class2); 如果想要获取元素的class属性的值，则需要考虑因为class并不是在style中被声明的。
因此关于操作style对象的方法全都不适用，所以我们可以通过getAttribute()方法来获取。
另外也可以直接通过className来进行获取。
注意：querySelector系列方法与getElementsBy系列方法对比有什么不同？
(i)两者的W3C标准不同
querySelector系列属于W3C中的Selectors API(JS)规范
getElementsBy系列则属于 W3C的DOM 规范。
(ii)两者浏览器的兼容不同
getElementsBy系列基本能被所有浏览器支持。
querySelector系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)
(iii)接受参数不同
querySelector系列接收的参数是一个css选择器名。
getElementsBy系列接收的参数只能是单一的className、tagName 和 name。
var c1 = document.querySelectorAll('.k1 .u');
var c2 = document.getElementsByClassName('p');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('d'); (iv)返回值不同
querySelectorAll()返回的是一个静态节点列表(Static NodeList)
getElementsBy系列的返回的是一个动态节点列表(Live NodeList)。
//查看下面两个经典案例
//案例1
var ul = document.querySelectorAll('ul')[0];
var list = ul.querySelectorAll("li");
for(var i = 0; i < list.length ; i++){ ul.appendChild(document.createElement("li")); } //案例2
var ul = document.getElementsByTagName('ul')[0];
var list = ul.getElementsByTagName("li");
for(var i = 0; i < list.length ; i++){ ul.appendChild(document.createElement("li")); } 结论是：
案例2中的list是一个动态的NodeList，每一次调用list都会重新对文档进行查询，导致无限循环的问题。
案例1中的list是一个静态的Node List，是一个li集合的快照，对文档的任何操作都不会对其产生影响。
关于js的Document节点操作页面元素就说到这里了，如有不足之处，欢迎指正！
感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。
- 点赞
- 收藏
- 关注作者
评论（0）