标签：console log DOM var 封装 div 方法 节点 nodeName
一、节点属性
（1）节点及对应节点号
- 元素节点 > 1
- 属性节点 > 2
- 文本节点 > 3
- 注释节点 > 8
- doucument > 9
- DocumentFragment > 11
（2）nodeName属性
<div class="box" id="box" style="background-color:green;">
我是文本节点
<!--我是注释节点-->
<h1> 我是标题标签</h1>
<a href="">我是超链接</a>
<p>我是段落标签</p>
</div>
var div = document.getElementsByClassName('box')[0];
console.log(div.nodeName); // DIV
// 变小写
var nodeName = div.nodeName.toLowerCase(); //div
// 变大写
var str = 'div';
str.toUpperCase(); // DIV
console.log(div.firstChild); // "我是文本节点"
console.log(div.firstChild.nodeName); // #text
console.log(div.childNodes[1]); // <!--我是注释节点-->
console.log(div.childNodes[1].nodeName); // #comment
console.log(div.childNodes[2]); // <h1> 我是标题标签</h1>
console.log(div.childNodes[2].nodeName); // #H1
console.log(div.childNodes[3]); // "我是文本节点"
console.log(div.childNodes[3].nodeName); // #text
元素节点的nodeName是标签名的大写，要变成小写可以用toLowerCase()，其它的节点是#xxx的形式
nodeName是只读的属性
（3）nodeValue属性
var div = document.getElementsByClassName('div')[0];
console.log(div.nodeName); // DIV
// 变小写
var nodeName = div.nodeName.toLowerCase(); //div
// 变大写
var str = 'div';
str.toUpperCase(); // DIV
var div = document.getElementsByClassName('box')[0];
console.log(div.firstChild.nodeValue); // "我是文本节点"
console.log(div.childNodes[1].nodeValue); // <!--我是注释节点-->
console.log(div.childNodes[3].nodeValue); // null
console.log(div.getAttribute('id').nodeValue); // "box"
console.log(div.getAttribute('id').value); // "box"
元素节点没有nodeValue这个属性，属性、文本、注释节点都有nodeValue这个属性
对于属性节点后面跟nodeValue/vale都可以找到对应的值
nodeValue是可写的，属性、注释、文本可用
（4）nodeType属性
返回节点对应的数字
<div class="box" id="box" style="background-color:green;">
我是文本节点
<!--我是注释节点-->
<h1> 我是标题标签</h1>
<a href="">我是超链接</a>
<p>我是段落标签</p>
</div>
var div = document.getElementsByClassName('box')[0];
console.log(div.nodeType); // 1
console.log(div.firstChild.nodeType); // 3
console.log(div.childNodes[1].nodeType); // 8
console.log(div.getAttributeNode('id').nodeType); // 1
div.nodeType = 5;
console.log(div.nodeType); // 1
nodeType是只读的
（5）封装children
children IE7以下是不支持的，所以可以用childNodes封装一个
<div class="box" id="box" style="background-color:green;">
我是文本节点
<!--我是注释节点-->
<h1> 我是标题标签</h1>
<a href="">我是超链接</a>
<p>我是段落标签</p>
</div>
var div = document.getElementsByClassName('box')[0];
function elemChildren(node) {
var arr = [],
children = node.childNodes;
for (var i = 0; i < children.length; i++) {
var childItem = children[i];
if (childItem.nodeType === 1) {
arr.push(childItem);
}
}
return arr;
}
console.log(elemChildren(div));
用类数组方式写：
（6）attributes属性
元素的属性集合
<div class="box" id="box" style="background-color:green;">
我是文本节点
<!--我是注释节点-->
<h1> 我是标题标签</h1>
<a href="">我是超链接</a>
<p>我是段落标签</p>
</div>
var div = document.getElementsByClassName('box')[0];
console.log(div.attributes);
结果：
获取属性：
console.log(div.attributes[1]); // id = "box"
console.log(div.getAttributeNode('id')); //id = "box"
获取值和更改值：
nodeValue是可写的
二、方法
（1）hasChildNodes()方法
判断元素有没有子节点，返回true或false
<div> // 换行符也是文本节点
</div>
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); // true
<div></div>
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); // flase
三、封装方法
四、DOM结构
原型上面是可以编程的
表现形式：
DOM结构树的顶点是Node
文本和注释节点
text是Text构造出来的，并且继承CharacterData的原型
Element
只要HTML Element构造出来的所有对象，都继承Element.prototype上面的方法和属性
它们是每一个标签元素dom节点的构造函数
继承关系：
Node
五、DOM操作深入
（1）getElementByID
dom元素是通过构造函数实例化出来的，document.getElementsByTagName()只是选择元素
（2）getElementByName
（3）getElementByTagName / getElementByClassName & querySelector / querySelectorAll
*通配符，只能是TagName
title是获取里面的文本，不是元素
直接访问html
只能使用不能访问
六、作业
标签：console,log,DOM,var,封装,div,方法,节点,nodeName 来源： https://blog.csdn.net/qq_42647547/article/details/116892433
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。