版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82432868
目录
Element类型
特征
nodeType的值为 1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或Element
下面图为Element的继承图：
属性
attributes
该属性返回注册到指定节点的所有属性节点的实时集合。它是NamedNodeMap
示例
<p></p>
<p></p>
<script>
//获取第一个p标签
var p=document.getElementsByTagName('p')[0];
var atts=p.attributes;
console.log(atts);//NamedNodeMap {length: 0}
</script>
tagName
返回调用它的元素的标签名称
示例
<span id="span">this is a span</span>
<script>
var sp=document.getElmentById('span');
console.log(sp.tagName);
</script>
name
获取或设置nameDOM中元素的属性。它近适用于以下元素:<a>,<applet>,<button>,<form>,<frame>,<img>,<input>,<map>,<meta>,<select>,<textarea>
示例
<form action="" name="formA">
<input type="text" value="foo">
</form>
<script>
var input=document.forms['formA'].children[0];
input.name='inputA';
console.log(input.name); //"inputA"
</script>className
获取并设置指定元素的class属性的值
示例
//<div id="div1"></div>
var div1=document.getElementById('div1');
if(div1.className=='active'){
div1.className="";
}else{
div.className="active"
}
id
该属性表示元素的标识符，反映了id的全局属性
示例
<div id="one"></div>
<script>
var div=document.getElementById('one');
var idstr=div.id //获取
console.log(idstr); //one
div.id='two' //设置
console.log(div.id); //two
</script>
方法
setAttribute()
设置指定元素的属性值。如果该属性已存在，则更新该值。否则添加具有指定名称和值的新属性
参数
第一个参数，指定要设置其值的属性名称。
第二个参数,要分配给属性的值，若指定的是非字符串则自动转换为字符串
返回值
undefined
实例
<button>hello world</button>
<script>
var b = document.querySelector("button");
var result=b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
console.log(result) //undefined
</script>
getAttribute()
获取属性的当前值,如果给定属性不存在则返回值为null或""(空串)
参数
获取其值的属性名称
返回值
一个包含值的字符串
示例
<div id="div1" align="align"></div>
<script>
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");
alert(align); //"align"
</script>
**:style、onclick通过getAttribute()调用返回的是字符串;通过.(点)获取的是对象例如: div1.style //returns cssCollection
removeAttribue()
该方法用于从一个元素中删除一个属性
参数
要删除的属性名
返回值
undefined
示例
<div id="div1" align="align"></div>
<script>
var div1 = document.getElementById("div1");
var align = div1.removeAttribute("align");
alert(align); //undefined
</script>
hasAttribute()
指示指定的元素是否具有指定的属性,返回布尔值
属性
表示属性名称的字符串
返回值
true/false
示例
// <div id="foo" name="bar"></div>
var foo = document.getElementById("foo");
console.log(foo.attributes)
if (foo.hasAttribute("bar")) {
// do something
console.log(1);
}
createElement()
创建新元素
参数
要创建元素的标签名,该标签名在html文档中不区分大小写
返回值
创建好的元素
示例
var div=document.createElement("div");
div.id="myDiv";
div.className="box";
**:此时创建好的节点还不能在页面中显示,我们可通过appendChild()、insertBefore()、replaceChild()方法将其加入到页面中。
appendChild()
该方法将一个节点添加到指定父节点列表末尾
返回值
该方法会把插入的这个节点引用作为返回值返回。
应用
//创建一个div元素,然后添加到body的最尾部
var div=document.createElement("div");
var returnNode=document.body.appendChild(div);
console.log(returnNode==div); //true
insertBefore()
该方法在参考节点之前插入一个节点作为一个指定父节点的子节点。
参数
第一个要插入的节点，第二个为参照的节点
返回值
返回被插入的节点
应用
<div id="parent">
<span id="child">child sapn</span>
</div>
<script>
//创建一个span标签
var sp1=document.createElement("span");
//获取id为child的span标签
var sp2=document.getElementById('child');
//获取div
var parentDiv = sp2.parentNode;
console.log(parentDiv.childNodes); // [text, span#child, text]
//将创建的span插入到html中span标签前
parentDiv.insertBefore(sp1, sp2);
console.log(parentDiv.childNodes); // [text, span, span#child, text]
</script>
replaceChild()
用指定的节点替换当前节点的一个子节点,并返回替换掉的节点
参数
第一个参数为要插入的节点;第二个参数为要替换的节点
返回值
返回替换掉的节点
应用
<div>
<span id="oldSpan">oldSpan</span>
</div>
<script>
//创建一个span标签
var newSpan=document.createElement('span');
//添加id 属性
newSpan.setAttribute("id","newSpan");
//创建文本
var newSpan_content=document.createTextNode("new Span元素的content");
//将文本加入newSpan中
newSpan.appendChild(newSpan_content);
//获取 oldSpan
var oldSpan=document.getElementById('oldSpan');
var parentDiv=oldSpan.parentNode;
var returnNode=parentDiv.replaceChild(newSpan,oldSpan);
console.log(returnNode); //<span id="oldSpan">oldSpan</span>
</script>
removeChild()
该方法从DOM中删除一个子节点,返回删除的节点
参数
要移除的那个子节点
返回值
返回被删除的节点
应用
<div id="top">
<div id="nested"></div>
</div>
<script>
//移除一个元素节点的所有子元素
var element=document.getElementById('top');
while(element.firstChild){
element.removeChild(element.firstChild);
}
</script> querySelector()
返回与该模式匹配的第一个元素，如果没有找到匹配元素,返回null
参数
一组选择器匹配
返回值
成功匹配的第一个元素
示例
<div id="mydiv">
mydiv
</div>
<script>
var body=document.querySelector("#mydiv");
console.log(body);
</script>
querySelectorAll()
返回所有匹配的元素而不仅仅是一个元素，该方法返回的是一个NodeList的实例
<div class="selected">
mydiv
</div>
<div class="selected">
selected
</div>
<div>
noClass
</div>
<script>
var divs=document.querySelectorAll(".selected");
console.log(divs);//NodeList(2)
</script>
matchesSelector()
检测是否与选择符匹配上
参数
css选择符
返回值
true/false
示例
<ul id="birds">
<li>Orange </li>
<li class="blue">blue</li>
<li>Great white </li>
</ul>
<script>
//var birds=document.getElementsByName('li');
var birds=document.getElementById('birds').childNodes;
birds.forEach( function(element, index) {
// statements
if(element.nodeType==1){
if(element.matches('.blue')){
console.log('the'+element.textContent);
}
}
});
</script>**：对于ForEach来说不能遍历HTMLCollection，可以遍历NodeList和Array（目前就测试了这些）
Text类型
特性
nodeType的值为3
nodeName的值为 "#text"
nodeValue的值为节点所包含的文本
parentNode是一个Element;
没有子节点
下面图为Text的继承树：
属性
data
获取文本内容
length
该属性只读属性。包含在其中的字符串大小的值
previousElementSibling
该属性是只读属性。返回前一个兄弟元素节点，如果没有则返回null
nextElementSilbling
该属性是只读属性。返回下个兄弟元素节点。如果没有则返回null
<body>
hello
<div>世界</div>
</body>
<script>
window.onload=function(){
var text=document.body.childNodes[0];
console.log(text.data); // hello
console.log(text.length); //9
console.log(text.previousElementSibling); //null
console.log(text.nextElementSibling); //<div>世界</div>
}
</script>
**:在计算文本长度时会把换行和制表符也计算在内;data获取时里面会包含制表符。
方法
appendData()
参数
将文本添加到节点末尾
返回值
undefined
deleteData()
参数
第一个参数表示起始偏移位置
第二个参数表示删除字符数
返回值
undefined
insertData()
参数
第一个参数表示开始插入的位置
第二个参数表示插入的文本
返回值
undefined
replaceData()
参数
第一个参数,指定开始位置
第二个参数,替换的字符数
第三个参数，表示要替换的文本
返回值
undefined
substringData()
参数
第一个参数,指定位置开始
第二个参数,提取的字符数
返回值
undefined
运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script >
window.onload=function(){
var text=document.body.firstChild;
//追加数据
text.appendData(',this is a text');
//插入数据
text.insertData(7,"在body里");
//替换数据
var data=text.replaceData(7,6,"不在Div里");
console.log(data);//undefiend
console.log('-------------------');
console.log(text); //"这是一个文本 不在Div里,this is a text"
console.log(text.length);
//删除数据
text.deleteData(6,6);
//截取数据
var str=text.substringData(1,3);
console.log(str); //"是一个"
}
</script>
</head>
<body>这是一个文本</body>
</html>splitText()
参数
指定分割文本位置点
返回值
从分割点开始文本最后组成的新文本
示例
var div=document.createElement("div");
var textNode=document.createTextNode("hello world");
div.appendChild(textNode);
document.body.appendChild(div);
var newNode=div.firstChild.splitText(5);
console.log(newNode); //" world"
createTextNode()
参数
要插入节点的文本
返回值
返回创建好的文本
示例
var div=document.createElement("div");
var textNode=document.createTextNode("<strong>hello</strong>world");
div.appendChild(textNode);
document.body.appendChild(div);