关于小米
27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
关于王飞
27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]
关于小艳
大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
重点： 原生属性操作、 CSS样式操作
页面元素节点的操作，都离不开DOM对象
节点包括：标签（元素）、标签属性、文本内容、空格回车等
document.createElement()用来生成网页元素节点，参数为元素的标签名； document.createTextNode()用来生成文本节点，参数为所要生成的文本节点的内容； node.appendChild()接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点； node.hasChildNodes()返回一个布尔值，表示当前节点是否有子节点 //js中带has的大部分都是判断 node.removeChild()接受一个子节点作为参数，用于从当前节点移除该子节点 node.cloneNode()用于克隆一个选中的节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。注意: 不会克隆绑定到该元素上的事件； node.innerHTML返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范） node.innerText 返回该元素包含的内容。该属性可读写 获取标签的内容 innerHTML属性 获取标签+文本 innerText属性 只获取文本
//创建元素节点
var p = document.createElement('p');
//创建文本节点
var t = document.createTextNode('女娲');
//添加节点
p.appendChild(t);
var d = document.querySelector('#d')
d.appendChild(p);
//判断是否有子节点
if(d.hasChildNodes('span')){
var s = document.querySelector('span');
//删除子节点
d.removeChild(s);
}
// 克隆一个节点
var c = d.cloneNode(true);
d.appendChild(c);
//操作选中元素的HTML代码，有值则是设置，无值则是获取
alert(d.innerHTML);
console.log(document.getElementById('d').innerText);
console.log(document.getElementById('d').innerHTML);node.id
node.a
node.className
var d = document.querySelector('#d');
//获取原有属性值
console.log(d.id);
//修改原有属性值
d.id = 'ff';
console.log(d.a); // undefined
//特殊：获取class类名，需使用className属性
console.log(d.className);
d.className += ' hello';node.getAttribute()
返回当前元素节点的指定属性。如果指定属性不存在，则返回null；
node.setAttribute()
为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute() 返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute() 从当前元素节点移除属性
var d = document.querySelector('#d');
//设置属性，有则修改，无则添加，可设置非标准属性
d.setAttribute('id','ffdd');
d.setAttribute('aa','kk');
//获取属性值，可获取非标准属性
console.log(d.getAttribute('aa'));
//如果有id属性
if(d.hasAttribute('id')){
//删除id属性
d.removeAttribute('id');
}nodeName
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType
表示节点的类型
元素 1； 属性 2； 文本 3； 注释 8； 文档 9
node.nextElementSibling
返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；
node.previousElementSibling
返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；
node.parentElement
返回当前节点的父级Element节点；
node.childNodes
返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。
node.firstChild* node.firstElementChild
返回树中节点的第一个子节点，如果节点是无子节点，则返回 `null。`
node.lastChild node.firstElementChild
返回该节点的最后一个子节点，如果该节点没有子节点则返回`null`。
一些需要重点注意的细节：
1. 名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：
比如background-color写成backgroundColor
2. 属性值都是字符串，设置时必须包括单位：
比如，div.style.width的值不能写为100，而要写为100px
3.//赋值是设置
d1.style.backgroundColor = 'red';
//不赋值则是获取
alert(d1.style.width);
4.如果将 样式表写在 style 标签内，我们将无法获取和修改；
getComputedStyle() 接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
注意: getComputedStyle() 是window对象下的方法，不是DOM对象
<style>
#d1{
width: 200px;height: 200px;
border: 1px solid red;
}
</style>
<body>
<div id="d1" ></div>
</body>
<script>
var d1 = document.querySelector('#d1');
d1.onclick = function(){
//获取不到
console.log(d1.style.width);
//获取计算后的样式
console.log(getComputedStyle(d1).width);
}
</script>document.documentURI 返回文档的 URL。
node.replaceChild(newChild, oldChild) 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
node.insertBefore() : parentElement.insertBefore(newElement,referenceElement)；
本站内容均为小米原创，转载请注明出处：小米技术社区>> JavaScript中DOM节点的操作,增删改以及节点属性、css样式操作