DOM核心内容(基础部分)
文档对象模型(Document Object Model),处理可扩展标记语言的标准接口
我们获取过来的DOM元素是一个对象,所以称为文档对象模型
文档Document 元素 Element 节点 Node 标签名 tagName 类名className
文档流 document stream
获取body元素
document.body
获取html元素
document.documentElement
事件的概述
事件就是触发响应的的事件
事件的组成:
- 事件源(获取事件源的方法看下面的5–查)
- 事件类型 (添加事件绑定事件)
- 事件处理程序 (采取函数赋值的方法)
鼠标事件
关于DOM的操作,主要是针对元素的操作
主要有创建、增、删、改 、查、属性操作、事件操作
1–创建
document.write
element.innerHTML
document.createElement
**document.write**
Document.write()
方法将一个文本字符串写入一个由 document.open()
打开的文档流,如果在已经加载完毕页面中调用此方法会导致页面的重绘。
document.write(markup);
markup:一个包含要写入文档的文本的字符串。
**element.innerHTML**
Element.innerHTML
属性设置或获取HTML语法表示的元素的后代。
const content = element.innerHTML;
element.innerHTML = htmlString;
设置元素的 将会删除所有该元素的后代并以上面给出的 htmlString 替代。
HTMLString中起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换行。element.innerText
也可以改变内容,可以获取HTMLString中起始位置到终止位置的全部内容,不识别HTML标签,同时去掉空格和换行。
如果要向一个元素中插入一段 HTML,而不是替换它的内容,那么请使用 insertAdjacentHTML()
方法。
**Document.createElement()**
在 HTML 文档中,Document.createElement()
方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName,则会生成一个未知 HTML 元素 HTMLUnknownElement
。
var element = document.createElement(tagName[, options]);
innerHTML
创建多个元素效率更高(不要拼接字符串,采用数组的形式拼接)结构稍微复杂。
//将字符串添加到数组中
var arr=[];
for(var i=0;i<=100;i++){
arr.push('百度')
}
//将数组转换为字符串,添加到文档中
inner.innerHTML=arr.join('');
2–增
node.appendChild(aChild)
-node.insertBefore()
node.appendchild(child)
添加创建的元素节点.是给父元素下的列表的最后添加类似于css中的::after
类似于push
element.appendChild(aChild)
**Node.insertBefore()**
方法在参考节点之前插入一个拥有指定父节点的子节点
node.insertBefore(child,指定元素)
var li=document.createElement('li');
//获取父项
var ul = querySelector('ul');
//添加子项到父项中,后面追加元素 类似于push
ul.appendChild(li);
//添加节点到指定位置的前面
ul.insertBefore(li , child[0])
//两步 1 创建元素 2添加元素
3–删
node.removeChild(child);
删除父节点下的子节点
var ul=document.querySelector('ul');
ul.removeChild(ul.children[0]);
//使用时 如果父元素没有了子元素,那么这个属性就会报错
//可以添加判断.在没有时返回null
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
a {
text-decoration: none;
color: #eee;
font-size: 14px;
float: right;
}
</style>
删除评论
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function () {
var flag = 0;
if (text.value == '') {
alert('请输入内容');
} else {
var li = document.createElement('li');
//innerHTML可以读取HTML标签
li.innerHTML = text.value + '<a href="javascript:;">删除</a>';
// 注意书写时使用驼峰命名法
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
//注意结构的书写位置,应该在生成列表之后获取
var as = document.querySelectorAll('a')
for (i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 要删除的是li,需要找他的父元素
ul.removeChild(this.parentNode);
}
}
flag = 1;
}
if (flag = 1) {
text.value = '';
}
}
</script>
</body>
4–改
主要修改dom恶元素属性。dom元素的内容、内容、表单的值等
- 修改元素属性:src 、href /、title
- 修改普通元素的内容: innerHTML、 innerText
- 修改表单元素: value 、 type disabled(按钮禁用)
- 修改元素的样式:type、 className
5-查
主要获取查询dom的元素
- DOM提供的API方法:
getElementById
、getElementsByTagName
、getElententsByClassName
- H5 提供的新方法 :
document.querySelector()
、document.querySelectorAll()
- 利用节点操作获取元素:
node.parentNode
(父),children
(子),previousElementSibling/nextElementSibling
(兄弟)
document.getElementById
返回一个匹配特定的ID元素
document.getElementsByTagName
返回一个包括所有给定标签名称的元素的HTML集合。整个文件结构都会被搜索,包括根节点。
decoment.getElementsByClassName
返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时,会搜索整个DOM文档,包含根节点。你也可以在任意元素上调用getElementsByClassName()
方法,它将返回的是以当前元素为根节点,所有指定类名的子元素
document.querySelector()
文档对象模型Document
引用的**querySelector()**
方法返回文档中与指定选择器或选择器组匹配的第一个 Element
对象。 如果找不到匹配项,则返回null
。
var element = document.querySelector(selectors);
//注意是匹配的第一个element对象
var el=document.querSelector('.className'); //匹配类名加‘.’
var el=document.querSelector('#id');//匹配id加‘#’
var el=document.querSelector('li');//匹配HTML标签
//还可以更强大
<div class="user-panel main">
<input name="login">
</div>;
<script>
var el = document.querySelector("div.user-panel.main input[name='login']");
</script>
转义特殊字符
如果要匹配的ID或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector
转义.
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // 不匹配任何元素
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div
</script>
document.querySelectorAll()
返回与指定的选择器组匹配的文档中的元素列表,和querySelector
;类似,但这个返回的是一个Nodelist.
node.parentNode
//获取最近的父节点、
parentNode.childNodes
//返回的是所有子节点的集合,该集合是即时更新的,但是包含元素节点和文本节点等
注意: 如果只想获取元素节点,需要处理一下
var ul =document.querySelector('ul');
for(var i=0;i<ul.length;ul.childNodes.length;i++){
if(ul.childNodes[i].noceType == 1){
//ul.childNodes[i]是元素节点
colose.log(ul.childNodes[i]);
}
}
parentNode.children
//获取子元素节点。非标准,但大多数浏览器支持
parentNode.firstChild
获取第一个子节点,但是会获取所有的子节点,包括文本节点等
parentNode.lastChild
获取最后一个子元素节点,同样包括文本节点等
//但是这个有着兼容性的问题,只有IE9+才支持
parentNode.firstElementChild
可以获取第一个子元素节点
parentNode.firstElementChild
可以获取最后一个子元素节点
//最后一个可以很好地使用的
parentNode.children[0];
获取第一个子元素节点
parentNode.children[parentNode.children.length - 1];
获取最后一个子元素节点
复制节点
node.cloneNode();
方法返回调用该方法的节点的一个副本.也称为克隆节点
并且该方法需要appendChild
配合添加
node.cloneNode();
括号里面为空,或者为false,
只是浅拷贝.只复制节点本身,不克隆里面的子节点
如果为true
,则是深拷贝,会复制里面的节点,以及里面所有的的子节点
Node.nodeType
只读属性 表示的是该节点的类型。**Node.nodeType**
nodeType
属性可用来区分不同类型的节点,比如 元素
, 文本
和 注释
。
附加一个案例
//表格添加数据(重要)
<body>
<table border="1">
<thead>
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
<script>
//因为没有学到数据库,只好写个数组来获取数据。
var arr = [
{
name: '溥仪',
subject: 'javascript',
grade: 100,
},
{
name: '溥修',
subject: 'javascript',
grade: 89,
},
{
name: '溥浩',
subject: 'javascript',
grade: 80,
},
{
name: '溥博',
subject: 'javascript',
grade: 95,
}
];
var tbody = document.querySelector('tbody');
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (k in arr[i]) {
var td = document.createElement('td');//运行一次,添加一个节点
td.innerHTML = arr[i][k];
tr.appendChild(td);
}
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = '<a href="javascript:;">删除</a>';
var as = document.querySelectorAll('a');//逻辑要清楚啊,这里获取的是所有的a
for (var j = 0; j < as.length; j++) {
// 这里也是要给所有的a添加属性
as[j].onclick = function () {
// 注意删除的是a父亲的父亲,
tbody.removeChild(this.parentNode.parentNode);
}
}
</body>
<style>
table {
width: 500px;
margin: 100px auto;
text-align:center;
}
thead {
height: 40px;
background-color: rgb(18, 158, 228);
}
td {
border: rgb(18, 214, 228) 1px solid;
height: 40px;
}
a {
text-decoration: none;
color: #333;
}
</style>