1.1、ID选择器
通过ID选取元素是最简单和常用的选取元素的方法，ID选择器性能优于其他选择器
var title = document.getElementById("title")
复制代码
ID不存在，则返回null
1.2、名称选择器
基于name属性的值选取元素区别于ID选择器。
其一： name属性值 不是必须惟一，多个元素可以能同样的名称；
其二： name属性只在少数HTML元素中有效，包括表单、表单元素、iframe以及img 元素
var sports = document.getElementsByName("sports")
复制代码
ID不存在，则返回null
1.3、标签选择器
利用HTML元素的标签名称选取指定类型的元素
var h1 = document.getElementsByTagName("h1")
复制代码
1.4、类选择器
利用HTML的class属性值选择元素
var title = document.getElementsByClassName("title")
复制代码
1.5、CSS单元素选择器
通过CSS样式表选择器的强大语法，来选择元素。 返回第一个匹配的元素
var title = document.querySelector("#title");
var h1 = document.querySelector("h1");
复制代码
1.6、CSS多元素选择器
通过CSS样式表选择器的强大语法，来选择元素。 返回元素数组
var h1s = document.querySelectorAll("h1");
复制代码
二、Dom遍历
2.1 节点相关
2.1.1 父节点-parentNode
返回父节点，如果
document
对象调用则返回
null
var title = document.querySelector("#title")
title.parentNode.style.color = "red"
复制代码
2.1.2 子节点-childNodes
返回所有子节点，即NodeList对象
var parent = document.querySelector("#parent")
var children = parent.childNodes
for(var i =0
console.log(i+"="+children[i].nodeName)
console.log(children.length)
复制代码
2.1.3 首子节点-firstChild
返回第一个子节点
var parent = document.querySelector("#parent")
var first = parent.firstChild
first.style.color = "red"
复制代码
2.1.4 首子节点-lastChild
返回最后一个子节点
var parent = document.querySelector("#parent")
var last = parent.lastChild
last.style.color = "red"
复制代码
2.1.5 下一兄弟节点-nextSibling
返回下一个兄弟节点
var title = document.querySelector("#title")
var next = title.nextSibling
next.style.color = "red"
复制代码
2.1.6 前一兄弟节点-previousSibling
返回前一个兄弟节点
var title = document.querySelector("#title")
var pre = title.previousSibling
pre.style.color = "red"
复制代码
2.1.7 节点类型-nodeType
返回节点类型的数字表示
1-代表Element节点
3-代表Text节点
8-代表Comment节点
9-代表Document节点
11-代表DocumentFragment节点
复制代码
2.1.8 节点值-nodeValue
返回
Text
节点 或
Comment
节点的值
var title = document.querySelector("#title")
console.log(title.firstChild.nodeValue)
复制代码
2.1.9 节点名-nodeName
返回元素的标签名，以大写形式表示
var title = document.querySelector("#title")
console.log(title.nodeName)
console.log(title.firstChild.nodeName)
复制代码
2.2 元素相关
2.2.1 子元素-children
返回所有子元素
var parent = document.querySelector("#parent")
var children = parent.children
for(var i =0
children[i].style.color = "red"
console.log(children.length)
复制代码
2.2.2 首子元素-firstElementChild
返回所有子元素中的第一个（节点是元素的一种）
var parent = document.querySelector("#parent")
var first = parent.firstElementChild
first.style.color = "red"
复制代码
2.2.3 尾子元素-lastElementChild
返回所有子元素中的最后一个
var parent = document.querySelector("#parent")
var last = parent.lastElementChild
last.style.color = "red"
复制代码
2.2.4 下一兄弟元素 nextElementSibling
返回下一个兄弟元素
var title = document.querySelector("#title")
var next = title.nextElementSibling
next.style.color = "red"
复制代码
2.2.5 下一兄弟元素 previousElementSibling
返回前一个兄弟元素
var title = document.querySelector("#title")
var previous = title.previousElementSibling
previous.style.color = "red"
复制代码
2.2.6 子元素数量
返回子元素的数量
var parent = document.querySelector("#parent")
console.log(parent.childElementCount)
复制代码
三、属性
3.1 标准属性
表示HTML文档元素的HTMLElement对象定义了读/写属性，它们对应于元素的HTML属性。 HTMLElement定义的通用HTML属性，包括id、lang、dir、事件处理程序onclick及表单相关属性等。
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>三十课 - JavaScript DOM操作之标准属性</title>
<script src="http://res.30ke.cn/res/js/console.js"></script>
</head>
<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>
复制代码
3.2 非标准属性
3.2.1 获取属性值 - getAttribute
返回非标准的HTML属性的值
<
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
>
复制代码
3.2.2 属性值设置 - setAttribute
设置非标准的HTML属性的值
<
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
>
复制代码
3.2.3 属性存在检测 - hasAttribute
返回布尔值，用来检测属性是否存在
<
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
>
复制代码
3.2.4 删除属性 - removeAttribute
删除某一属性
<
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.3 数据集属性- dataset
在HTML5文档中，任意以 data- 为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法
<
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
>
复制代码
3.4 元素属性 - attributes
Node节点定义了 attributes 属性，针对 Element 对象，attributes 是元素所有属性的类数组对象
var attributes = img.attributes
复制代码
索引 attributes 对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值
<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>
复制代码
四、元素内容
4.1 元素内容 - innerHTML
innerHTML
属性以字符串形式返回这个元素的内容。 也可以用来替换元素当前内容
<div
id
=
"parent"
></div>
<script>
var
parent
= document.querySelector(
"#parent"
)
parent.innerHTML
=
"<h1>三十课</h1>"
alert(parent.innerHTML)
</script>
</body>
复制代码
4.2 元素及内容 - outerHTML
outerHTML
属性以字符串形式返回这个元素及内容。 也可以用来替换元素当前内容
<
div
id
=
"parent"
>
三十课
</
div
>
<
script
>
var
parent =
document
.
querySelector
(
"#parent"
);
alert
(parent.
outerHTML
);
parent.
outerHTML
=
"<h1>三十课</h1>"
;
</
script
>
</
body
>
复制代码
4.3 纯文本元素内容 - textContent
查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。 在IE中，可以用Element的innerText属性来代替
<
h1
id
=
"title"
>
三十课
</
h1
>
<
div
id
=
"main"
>
</
div
>
<
script
>
var
title =
document
.
querySelector
(
"#title"
);
console
.
log
(title.
textContent
);
title.
textContent
=
"三十课2"
;
</
script
>
</
body
>
复制代码
五、创建节点
5.1 创建元素节点 - createElement
使用document 对象的createElement () 方法创建新的Element节点
<div
id
=
"parent"
></div>
<script>
var
parent
= document.querySelector(
"#parent"
)
var
h1
= document.createElement(
"h1"
)
h1.textContent
=
"三十课"
parent.appendChild(h1)
</script>
</body>
复制代码
5.2 创建文本节点 - createTextNode
创建纯文本节点
<
h1
id
=
"title"
>
</
h1
>
<
script
>
var
title =
document
.
querySelector
(
"#title"
);
var
txt =
document
.
createTextNode
(
"三十课"
);
title.
appendChild
(txt);
</
script
>
</
body
>
复制代码
5.3 创建文档片段 - createDocumentFragment
使用文档片段通常会带来更好的性能。因为文档片段存在于内存中，并不在Dom树中，所以将子元素插入到文档片段时不会引起页面回流 （对元素位置和几何上计算）
<div
id
=
"parent"
></div>
<script>
var
parent
= document.querySelector(
"#parent"
)
var
fragment
= document.createDocumentFragment()
var
h1
= document.createElement(
"h1"
)
h1.textContent
=
"三十课"
fragment.append(h1)
parent.append(fragment)
</script>
</body>
复制代码
5.4 创建注释节点 -- createCmoment
创建注释节点不经常使用
<
h1
id
=
"title"
>
三十课
</
h1
>
<
script
>
var
title =
document
.
querySelector
(
"#title"
);
var
comment =
document
.
createComment
(
"Created by 毛瑞"
);
title.
appendChild
(comment);
</
script
>
</
body
>
复制代码
5.5 节点克隆 -- cloneNode
通过复制已存在的节点来创建新的文档节点。传参数true表示深克隆，false表示浅复制
<div
id
=
"parent"
>
<h1
class
=
"title"
>三十课</h1>
<script>
var
parent
= document.querySelector(
"#parent"
)
var
titles
= document.querySelectorAll(
".title"
)
var
title2
= titles[
0
].cloneNode(
true
)
parent.appendChild(title2)
</script>
</body>
复制代码
六、插入节点
6.1 插入自节点 -- appendChild
在指定元素上插入子节点，并使其成为该节点的最后一个子节点
<div
id
=
"parent"
>
<h1
id
=
"title"
>三十课</h1>
<script>
var
parent
= document.querySelector(
"#parent"
)
var
h2
= document.createElement(
"h2"
)
h2.textContent
=
"毛瑞的笔记本"
parent.appendChild(h2)
</script>
</body>
复制代码
6.2 节点前插入 -- insertBefore
1. 在父节点上调用本方法
2. 第一参数表示待插入的节点
3. 第二参数是父节点中已经存在的子节点，新节点插入到该节点的前面
复制代码
<body>
<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>
复制代码
七、删除和替换
7.1 删除子节点 -- removeChild
1. 在父节点上调用
2. 参数是待删除的节点
复制代码
<body>
<h1>三十课</h1>
<h2 id="subTitle">毛瑞的笔记本</h2>
</div>
<script>
var h2 = document.querySelector("#subTitle");
h2.parentNode.removeChild(h2);
</script>
</body>
复制代码
7.2 替换子节点 -- replaceChild
1. 在父节点上调用
2. 第一参数是新节点
3. 第二个参数是需要替换的节点
复制代码
<body>
<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>
复制代码
