目录
1. 获取属性值,使用.访问自有属性,使用getAttribute获取自定义属性。
1. DOM概念
DOM(Document Object Moel)是操作HTML的api,全称文档对象模型。
DOM的最小组成单位叫做节点(node)。
常用节点
- 文档节点 (document)
整个HTML文档document对象作为window对象的属性存在的,我们不用获取可以直接使用。
-
元素节点(Element)
HTML文档中的HTML标签。
- 属性节点(Attribute)
元素的属性 表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
- 文本节点(Text)
HTML标签中的文本内容。
- 其它节点
DocumentType
doctype标签(比如<!DOCTYPE html>
)。
Comment
注释。
DocumentFragment
文档的片段。
2. Node类型
DOM Level 1 描述了名为Node的接口,该接口将由DOM中的所有节点类型实现。
JavaScript中所有的节点类型都继承自Node类型。
2.1 Node的属性
- body节点
//获取body节点
var body=document.body;
- 查看节点类型(nodeType)
console.log(document.nodeType);//9
节点类型 | 值 | 对应常量 |
---|---|---|
文档节点(document) | 9 | Node.DOCUMENT_NODE |
元素节点(element) | 1 | Node.ELEMENT_NODE |
属性节点(attr) | 2 | Node.ATTRIBUTE_NODE |
文本节点(text) | 3 | Node.TEXT_NODE |
文档类型节点(DocumentType) | 10 | Node.DOCUMENT_TYPE_NODE |
注释节点(Comment) | 8 | Node.COMMENT_NODE |
文档片断节点(DocumentFragment) | 11 | Node.DOCUMENT_FRAGMENT_NODE |
- 获取节点名称 返回纯大写节点名称
<div id="d1">hello world</div>
<script>
var div = document.getElementById('d1');
console.log(div.nodeName); //DIV
</script>
- 获取子节点 childNodes保存一个NodeList对象
<div id="d1">hello world<div>我是子节点</div></div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.childNodes); //NodeList[text, div]
</script>
- 获取兄弟节点中的前一个节点
<div id="d1">hello</div><div id="d2">world</div>
<script>
var div1 = document.getElementById('d1');
var div2 = document.getElementById('d2');
console.log(div2.previousSibling); //<div id="d1">hello</div>
console.log(div2.previousSibling === div1); // true
</script>
- 获取兄弟节点的下一个节点
<div id="d1">hello</div><div id="d2">world</div>
<script>
var div1 = document.getElementById('d1');
var div2 = document.getElementById('d2');
console.log(div1.nextSibling); //<div id="d2">world</div>
console.log(div1.nextSibling === div2); // true
</script>
- 获取childNodes列表中的第一个节点和最后一个节点。
<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.firstChild); // hello world
console.log(div1.lastChild); // <div>我是子节点</div>
var div2 = document.getElementById('d2');
console.log(div2.firstChild); // <div>我是子节点</div>
</script>
- 指向表示整个文档的文档节点。
console/log(body.ownerDocument);
- 查看body节点是否有孩子节点
console.log(body.hasChildNodes());
- 获取某一元素节点内的元素孩子节点
console.log(body.children);
类数组转数组 es5
//es5
body.childNodes
var result=Array.prototype.slice.call(childs,0);
console.log(result);
//es6
Array.from(childs);
var temp=Array.from(childs);
console.log(temp)
从孩子节点中过滤出元素节点(拓展运算符)
var temp=Array.from(childs);
var result=temp.filter(function(item){
return item.nodeType === 1
})
console.log(result);
2.2方法
2.2.1.appendChild() 追加节点
appendChild方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。该方法的返回值就是插入文档的子节点。
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
</script>
2.2.2.insertBefore()插入节点
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
insertBefore方法接受两个参数,第一个参数是所要插入的节点newNode,第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
//创建一个新的、普通的<span>元素
var sp1 = document.createElement("span");
// 向span标签插入内容
sp1.innerHTML = '我是span标签'
//插入节点之前,要获得节点的引用
var sp2 = document.getElementById("childElement");
//获得父节点的引用
var parentDiv = sp2.parentNode;
//在DOM中在sp2之前插入一个新元素
parentDiv.insertBefore(sp1, sp2);
</script>
2.2.3.removeChild() 移除节点
removeChild方法接受一个子节点作为参数,用于从当前节点移除该子节点。返回值是移除的子节点。
<div id="d1">
<span id="s1">我是span标签</span>
</div>
<script>
var span1 = document.getElementById('s1');
span1.parentNode.removeChild(span1);
</script>
2.2.4.replaceChild()
replaceChild方法用于将一个新的节点,替换当前节点的某一个子节点。
var replacedNode = parentNode.replaceChild(newChild, oldChild);
replaceChild方法接受两个参数,第一个参数newChild是用来替换的新节点,第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。
<div id="d1">
<span id="s1">我是span标签</span>
</div>
<script>
var span1 = document.getElementById('s1');
//创建一个新的div标签
var div1 = document.createElement("div");
// 向div标签插入内容
div1.innerHTML = '我是div1标签';
// 节点替换
span1.parentNode.replaceChild(div1, span1);
</script>
以下属性和方法可以任意元素节点调用。
- 获取节点内部内容
parent.innerHTML;设别HTML代码片段;
parent.innerText;;只识别文本 去除空格和回车;
parent.textContent;只识别文本,不去除空格和回车。
- 清空节点内部内容
parent.innerHTML="";
- cloneNode(); 复制节点 有参数true代表深复制
浅复制 :只复制节点,不复制内容。
深复制:复制节点和内容。
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);
3. Document类型
Javascript通过使用Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用。HTMLDocument继承自Document。
3.1属性
- document 表示整个html文档页面
console.log(document);
- html元素
console.log(document.documentElement);
- body元素
console.log(document.body);
- img元素
console.log(document.images);
- form元素
console.log(document.forms);
- a标签 带有href属性的
console.log(document.links);
- 获取域名 --只能通过服务器打开
console.log(document.domain);
- 获取文档头信息
console.log(document.doctype);
- 获取文档标题
console.log(document.title);
- 获取URL
console.log(document.URL);
- 获取页面来源地址--只能通过服务器打开
console.log(document.referrer);
3.2方法
查找元素
方法 | 描述 |
---|---|
document.getElementById(id) | 通过元素 id 来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
getElementById()
返回匹配指定 id 的一个元素。
<div id="d1">我是一个div标签</div>
<script>
// 查找id为d1的标签
var div = document.getElementById('d1');
console.log(div);
</script>
getElementsByTagName()
返回一个HTMLCollection
(伪数组),包含匹配指定标签名的所有元素。
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
// 查找所有p标签
var p = document.getElementsByTagName('p');
console.log(p);
</script>
getElementsByClassName()
返回一个HTML集合HTMLCollection
(伪数组),包含匹配指定类名的所有元素。
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
// 查找class为div1的标签
var div = document.getElementsByClassName('div1');
console.log(div);
</script>
document.querySelector()
返回文档中匹配指定的CSS选择器的第一元素。
<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
document.querySelector("#div1").innerHTML = "Hello World!";
</script>
document.querySelectorAll()
document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表。
<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
console.log(document.querySelectorAll(".div1"));
var x = document.querySelectorAll(".div1");
x[0].innerHTML = '我是新的div';
</script>
4.Element类型
1. 获取属性值,使用.访问自有属性,使用getAttribute获取自定义属性。
- 获取div的id属性
console.log(div.id);
- 获取div的类名属性
console.log(div.className);
- 获取div的title属性
- 使用[]也可以获取属性
console.log(div.title);
console.log(div['title']);
2. 获取自定义属性
console.log(div.flag); 使用.获取不到自定义属性
console.log(div.getAttribute('data-flag'));
console.log(div.getAttribute(['data-flag']));
3.修改属性
div.setAttribute('data-flag','test1');
4.获取style属性和onclick属性
.style .onclick拿到的是对象或函数 getAttribute拿到的是字符串。
console.log(div.style) {}对象
div.style.width='200px';
console.log(div.onclick) function(){}函数
console.log(div.getAttribute('style')); 字符串
console.log(div.getAttribute('onclick'));
5. 移除属性
div.removeAttribute('title');
console.log(div);