DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),描绘了一个层次化的节点树。
15.1 创建DOM节点
常用的节点类型有如下几种:元素节点、属性节点、文本节点、注释节点
1. 元素节点
创建一个div
var div = document.createElement('div');
cnosole.log(div);
2. 属性节点
属性节点包含两类,
- 一类是DOM元素的基本属性,
- 还有一类是自定义属性。
- 基本属性既可以通过如下方式设置,也可以通过 createAttribute 方式设置。
document.body.id = 'container';
注意:自定义属性是一定要使用
createAttribute
方式来创建的。
比如创建一个自定义属性 custom 。
var dataAttribute = document.createAttribute('custom');
cnosole.log(dataAttribute);
3.文本节点
创建一个内容为“大家好”的文本节点
var textNode = document.createTextNode('大家好');
console.log(textNode);
4.注释节点
创建一个内容为“这一个标签”的注释节点
var comment = document.createComment('这是一个标签');
console.log(comment);
5. 节点克隆
通过复制已存在的节点来创建新的文档节点。传参数true表示深克隆,false表示浅复制
<body>
<div id="parent">
<h1 class="title">三十课</h1>
</div>
<script>
var parent = document.querySelector("#parent");
var titles = document.querySelectorAll(".title");
var title2 = titles[0].cloneNode(true);
parent.appendChild(title2);
</script>
</body>
15.2 DOM删除和替换
1. 删除子节点 —— removeChild
- 在父节点上调用
- 参数是待删除的节点
<body>
<div>
<h1>三十课</h1>
<h2 id="subTitle">毛瑞的笔记本</h2>
</div>
<script>
var h2 = document.querySelector("#subTitle");
h2.parentNode.removeChild(h2);
</script>
</body>
2. 替换子节点——replaceChild
- 在父节点上调用
- 第一参数是新节点
- 第二个参数是需要替换的节点
<body>
<div>
<h1>三十课</h1>
<h2 id="subTitle">毛瑞的笔记本</h2>
</div>
<script>
var h2 = document.querySelector("#subTitle");
var h2n = document.createElement("h2");
h2n.textContent = "毛瑞的新笔记本2";
h2.parentNode.replaceChild(h2n, h2);
</script>
</body>
15.3 DOM属性修改
1. 标准属性
表示HTML文档元素的HTMLElement对象定义了读/写属性,它们对应于元素的HTML属性。 HTMLElement定义的通用HTML属性,包括id、lang、dir、事件处理程序onclick及表单相关属性等。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三十课 - JavaScript DOM操作之标准属性</title>
<script src="http://res.30ke.cn/res/js/console.js"></script>
</head>
<body>
<form id="myform">
<input type="text" value="毛瑞" />
</form>
<div id="main"></div>
<script>
var form = document.querySelector("#myform");
form.action = "http://30ke.cn";
form.method = "post";
console.log(form.id);
console.log(form.action);
console.log(form.method);
</script>
</body>
</html>
2 非标准属性
2.1 获取属性值 - getAttribute
返回非标准的HTML属性的值
<body>
<img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
console.log(img.getAttribute("width"));
</script>
</body>
2.2 属性值设置 - setAttribute
设置非标准的HTML属性的值
<body>
<img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
img.setAttribute("width","400px");
console.log(img.getAttribute("width"));
</script>
</body>
2.3 属性存在检测 - hasAttribute
返回布尔值,用来检测属性是否存在
<body>
<img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
console.log(img.hasAttribute("width"));
console.log(img.hasAttribute("height"));
</script>
</body>
2.4 删除属性 - removeAttribute
删除某一属性
<body>
<img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
img.removeAttribute("width");
console.log(img.getAttribute("width"));
</script>
</body>
3 数据集属性- dataset
在HTML5文档中,任意以 data- 为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法
<body>
<img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
var x = img.dataset.x;
console.log(x);
</script>
</body>
4 元素属性 - attributes
Node节点定义了 attributes 属性,针对 Element 对象,attributes 是元素所有属性的类数组对象
var attributes = img.attributes;
索引 attributes 对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值
<body>
<img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
<div id="main"></div>
<script>
var img = document.querySelector("#img");
var attributes = img.attributes;
console.log(attributes[0].name+" : "+ attributes[0].value);
console.log(attributes.src.value);
console.log(attributes["width"].value);
</script>
</body>
5 元素内容
5.1 元素内容 - innerHTML
innerHTML 属性以字符串形式返回这个元素的内容。 也可以用来替换元素当前内容
<body>
<div id="parent"></div>
<script>
var parent = document.querySelector("#parent");
parent.innerHTML = "<h1>三十课</h1>";
alert(parent.innerHTML);
</script>
</body>
5.2 元素及内容 - outerHTML
outerHTML 属性以字符串形式返回这个元素及内容。 也可以用来替换元素当前内容
<body>
<div id="parent">三十课</div>
<script>
var parent = document.querySelector("#parent");
alert(parent.outerHTML);
parent.outerHTML = "<h1>三十课</h1>"; // 注意:div 变成了 h1
</script>
</body>
5.3 纯文本元素内容 - textContent
查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。 在IE中,可以用
Element
的innerText
属性来代替
<body>
<h1 id="title">三十课</h1>
<div id="main"></div>
<script>
var title = document.querySelector("#title");
console.log(title.textContent);
title.textContent = "三十课2";
</script>
</body>
15.4 DOM属性查找
1. id属性查找
- 通过ID选取元素是最简单和常用的选取元素的方法,ID选择器性能优于其他选择器
查找拥有指定id的第一个元素节点。
ID不存在,则返回null
//例如我们查找一个id属性值为“id”的元素。
var id = document.getElementById('id');
console.log(id);
2. class属性查找
- 利用HTML的class属性值选择元素
查找所有带有class指定属性值的元素。
//例如我们查找class属性值为“class”的元素。
var className = document.getElementsByClassName('class');
console.log(className);
3. name属性查找
- 其一: name属性值 不是必须惟一,多个元素可以能同样的名称;
- 其二: name属性只在少数HTML元素中有效,包括表单、表单元素、iframe以及img 元素
查找所有指定name属性值的元素
//例如我们查找name属性值为name的元素。
var name = document.getElementsByName('name');
console.log(name);
4. 标签名查找
- 利用HTML元素的标签名称选取指定类型的元素
查找所有指定标签名的元素
//例如我们查找标签名为div的元素。
var tag = document.getElementsByTagName('div');
console.log(tag);
5. css选择器查找
通过CSS样式表选择器的强大语法,来选择元素。
返回第一个匹配的元素
var title = document.querySelector("#title"); // CSS ID选择
var h1 = document.querySelector("h1"); //选取第一个h1元素
返回元素是类数组
var h1s = document.querySelectorAll("h1"); //返回所有h1标签元素
15.5 DOM插入
1. 插入自节点 – appendChild
在指定元素上插入子节点,并使其成为该节点的最后一个子节点
<body>
<div id="parent">
<h1 id="title">三十课</h1>
</div>
<script>
var parent = document.querySelector("#parent");
var h2 = document.createElement("h2");
h2.textContent = "毛瑞的笔记本";
parent.appendChild(h2);
</script>
</body>
2. 节点前插入 – insertBefore
- 在父节点上调用本方法
- 第一参数表示待插入的节点
- 第二参数是父节点中已经存在的子节点,新节点插入到该节点的前面
<body>
<div>
<h2 id="subTitle">毛瑞的笔记本</h2>
</div>
<script>
var h2 = document.querySelector("#subTitle");
var h1 = document.createElement("h1");
h1.textContent = "三十课";
h2.parentNode.insertBefore(h1,h2);
</script>
</body>
3. 添加到节点的后面
没有这个函数 😶 可以使用 insertBefore 方法和 nextSibling 来模拟它
parentDiv.insertBefore(sp1, sp2.nextSibling);
- 如果sp2没有下一个节点,则它肯定是最后一个节点,则sp2.nextSibling返回null,且sp1被插入到子节点列表的最后面(即sp2后面)
DOM遍历
1 节点相关
1.1 父节点-parentNode
返回父节点,如果document 对象调用则返回 null
var title = document.querySelector("#title");
title.parentNode.style.color = "red";
1.2 子节点-childNodes
返回所有子节点,即NodeList对象
var parent = document.querySelector("#parent");
var children = parent.childNodes;
for(var i =0; i< children.length; i++) {
console.log(i+"="+children[i].nodeName);
}
console.log(children.length);
1.3 首子节点-firstChild
返回第一个子节点
var parent = document.querySelector("#parent");
var first = parent.firstChild;
first.style.color = "red";
1.4 首子节点-lastChild
返回最后一个子节点
var parent = document.querySelector("#parent");
var last = parent.lastChild;
last.style.color = "red";
1.5 下一兄弟节点-nextSibling
返回下一个兄弟节点
var title = document.querySelector("#title");
var next = title.nextSibling;
next.style.color = "red";
1.6 前一兄弟节点-previousSibling
返回前一个兄弟节点
var title = document.querySelector("#title");
var pre = title.previousSibling;
pre.style.color = "red";
1.7 节点类型-nodeType
返回节点类型的数字表示
1-代表Element节点
3-代表Text节点
8-代表Comment节点
9-代表Document节点
11-代表DocumentFragment节点
1.8 节点值-nodeValue
返回Text 节点 或 Comment 节点的值
var title = document.querySelector("#title");
console.log(title.firstChild.nodeValue);
1.9 节点名-nodeName
返回元素的标签名,以大写形式表示
var title = document.querySelector("#title");
console.log(title.nodeName);
console.log(title.firstChild.nodeName);
2 元素相关
2.1 子元素-children
返回所有子元素
var parent = document.querySelector("#parent");
var children = parent.children;
for(var i =0 ;i < children.length; i++) {
children[i].style.color = "red";
}
console.log(children.length);
2.2 首子元素-firstElementChild
返回所有子元素中的第一个(节点是元素的一种)
var parent = document.querySelector("#parent");
var first = parent.firstElementChild;
first.style.color = "red";
2.3 尾子元素-lastElementChild
返回所有子元素中的最后一个
var parent = document.querySelector("#parent");
var last = parent.lastElementChild;
last.style.color = "red";
2.4 下一兄弟元素 nextElementSibling
返回下一个兄弟元素
var title = document.querySelector("#title");
var next = title.nextElementSibling;
next.style.color = "red";
2.5 下一兄弟元素 previousElementSibling
返回前一个兄弟元素
var title = document.querySelector("#title");
var previous = title.previousElementSibling;
previous.style.color = "red";
2.6 子元素数量
返回子元素的数量
var parent = document.querySelector("#parent");
console.log(parent.childElementCount);