document节点属性 方法
nodeName
document的nodeName
console.log(document.nodeName);//#document
<body>
<div>
<a href="">我是超链接a>
<p>我是段落p>
<h1>我是标题h1>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.nodeName); //DIV
script>
body>
nodeName是一个只读的属性
nodeValue
元素节点是没有nodeValue这个属性的
<body>
<div>
我是文本节点
<h1>我是标题h1>
<a href="">我是超链接a>
<p>我是段落p>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild.nodeValue);
console.log(div.childNodes[1].nodeValue);
console.log(div.childNodes[3].nodeValue);
script>
body>
获取属性节点的值
<body>
<div class="box" id="box" style="background-color: green">
我是文本节点
<h1>我是标题h1>
<a href="">我是超链接a>
<p>我是段落p>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.getAttributeNode('id'));
console.log(div.getAttributeNode('id').nodeValue);
console.log(div.getAttributeNode('id').value);
script>
body>
nodeValue是可写的
nodeType
nodeType是只读的
<body>
<div class="box" id="box" style="background-color: green">
我是文本节点
<h1>我是标题h1>
<a href="">我是超链接a>
<p>我是段落p>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.nodeType); //1
console.log(div.getAttributeNode('id').nodeType); //2
console.log(div.firstChild.nodeType); //3
console.log(div.childNodes[1].nodeType); //8
script>
body>
封装childNodes为children
封装寻找子元素的方法
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;
}
用类数组的方法封装(1)
function elemChildren(node) {
var temp = {
length: 0,
push: Array.prototype.push,
splice: Array.prototype.splice,
},
len = node.childNodes.length;
for (var i = 0; i < len; i++) {
var childItem = node.childNodes[i];
if (childItem.nodeType === 1) {
temp[temp['length']] = childItem;
temp['length']++;
}
}
return temp;
}
用类数组的方法封装(2)
function elemChildren(node) {
var temp = {
length: 0,
push: Array.prototype.push,
splice: Array.prototype.splice,
},
len = node.childNodes.length;
for (var i = 0; i < len; i++) {
var childItem = node.childNodes[i];
if (childItem.nodeType === 1) {
temp.push(childItem);
}
}
return temp;
}
attributes
元素的属性集合
可写的
<body>
<div class="box" id="box" style="background-color: green">
我是文本节点
<h1>我是标题h1>
<a href="">我是超链接a>
<p>我是段落p>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.attributes);
script>
body>
<body>
<div class="box" id="box" style="background-color: green">
我是文本节点
<h1>我是标题h1>
<a href="">我是超链接a>
<p>我是段落p>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.attributes[1].nodeValue);
console.log(div.attributes[1].value);
console.log(div.getAttributeNode('id').nodeValue);
console.log(div.getAttributeNode('id').value);
script>
body>
hasChildNodes
判断一个元素是否有子节点的方法
返回boolean
<body>
<div>
div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); //true
script>
body>
换行之后就有文本节点 就返回true
<body>
<div>div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); //false
script>
body>
document
document继承的是HTMLDocument 并非直接继承Document
document 构造函数 -> HTMLDocument
HTMLDocument 构造函数 -> Document
<body>
<div>123div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(Object.prototype.toString.call(div));//[object HTMLDivElement]
script>
body>