4. 操作元素
JavaScript可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
4.1 改变元素内容
element.innerText
- 从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉
- innerText不识别HTML标签
- 非标准
- 可读写的，可以获取元素里面的内容
element.innerHTML（推荐使用）
- 从起始位置到终止位置的全部内容，保留Html标签，同时保留空格和换行
- 能识别HTML标签
- W3C推荐
- 可读写的，可以获取元素里面的内容
<body>
<p>
说到做到，有话直说。
<span>是漩涡鸣人的忍道</span>
</p>
<script type="text/javascript">
var p = document.querySelector('p');
console.log(p.innerText);//说到做到，有话直说。 是漩涡鸣人的忍道
console.log(p.innerHTML);/* 说到做到，有话直说。
<span>是漩涡鸣人的忍道</span> */
</script>
</body>
4.2 常用元素的属性操作
使用元素.属性 = ‘新的值’，来修改元素属性
<body>
<button id="mr">呐撸拖</button>
<button id="zz">啥是给</button><br>
<img src="img/mr.gif" >
<script type="text/javascript">
//1.获取元素
var mr = document.getElementById('mr');
var zz = document.getElementById('zz');
var img = document.querySelector('img');
//2.注册事件
zz.onclick = function(){
img.src = "img/zz.gif";
img.title = '宇智波佐助';
}
mr.onclick = function(){
img.src = "img/mr.gif";
img.title = '漩涡鸣人';
}
</script>
</body>
4.3 表单元素的属性操作
因为表单内容是属性，所以并不能直接使用innerHTML来修改，得用元素.属性名 = ‘新值’来修改
<body>
<button type="button">按钮</button>
<input type="text" value="输入内容" />
<script type="text/javascript">
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
//input.innerHTML = '已点击'; 无效
input.value = '已点击';//可改变value内容
//使用disabled让某个表单被禁用，不能被点击
this.disabled = true;
}
</script>
</body>
4.4 样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作
1.element.style 行内样式操作
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 我们可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作 -->
<div></div>
<script type="text/javascript">
//1.获取元素
var div = document.querySelector('div');
//2.注册事件 处理程序
div.onclick = function(){
//element.style里面的属性采用驼峰命名法
//JS修改 style属性操作,产生的是行内样式,css权重比较高
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
2.element.className 类名样式操作
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
//1.在修改元素样式时，如果样式比较少或者功能简单。使用element.style
var test = document.querySelector('div');
test.onclick = function(){
//在修改多个样式时，使用element.style显得非常复杂
// this.style.backgroundColor = 'purple'
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px'
//2.通过修改元素的className更改元素的样式，适合修改多样式的情况
//先将修改后的样式写进css，再让当前元素的类名改为change
this.className = 'change';
//3.注意会覆盖掉原先的类名，若要保留原先的类名，可用空格分开
this.className = 'first change';
}
</script>
排他思想
排他思想：首先排除其他人，然后再设置自己的样式，这种排除其他人的思想我们称为排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
1.所有元素全部清除样式
2.给当前元素设置样式
3.注意：顺序不能颠倒先干掉他人，再设置自己。
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
//btns得到的是伪数组，里面的每一个元素为btns[i]
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
//(1)我们先把所有的按钮背景颜色去掉
for(var i = 0; i<btns.length; i++){
btns[i].style.backgroundColor = '';
}
//(2)然后才让当前元素背景颜色为pink
this.style.backgroundColor = 'pink';
}
}
//排他思想：首先排除其他人，然后再设置自己的样式，这种排除其他人的思想我们称为排他思想
// 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
// 1.所有元素全部清除样式
// 2.给当前元素设置样式
// 3.注意：顺序不能颠倒先干掉他人，再设置自己。
</script>
4.5 元素属性操作
1.获取元素的属性值
- element.属性
console.log(div.id);
- element.getAttribute(‘属性’)
通常用来获取自定义属性（程序员自己添加的属性），如div中的index属性
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
2.设置元素的属性值
- element.属性 = ‘值’；
div.id = 'test';;
- element.setAttribute(‘属性’，值)；
div.setAttribute('index', 2);
3.移除元素的属性
. element.removeAttribute(‘属性’)； 通常用来设置自定义属性
div.removeAttribute('index');
4.6自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
自定义属性是通过getAttribute(‘属性名’)获取。
1.设置H5自定义属性
H5规定自定义属性以data- 开头作为属性名并赋值。
比如
<div data-index="1"></div>
或用JS设置
element.setAttribute('data-index'，2)；
2.获取H5自定义属性的值
- 兼容性获取: element.getAttribute(‘data-index’);
- H5新增:element.dataset.index或者element.dataset[‘index’] ie 11才开始支持
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
//h5新增获取自定义属性方法 只能获取data-开头的属性
console.log(div.dataset);//dataset是存放了所有以data开头的自定义属性的集合
console.log(div.dataset.index);
console.log(div.dataset['time']);
//如果自定义属性里面有多个-链接的单词，使用element.dataset.index或者element.dataset['index']时，采用驼峰命名法
console.log(div.getAttribute('data-list-name'));
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
5.节点操作
| 利用DOM提供的方法获取元素 | 利用节点获取元素 |
|---|---|
| 逻辑性不强，繁琐 | 简单、符合逻辑，但是兼容性差 |
| document.getElementById() | 利用父子兄的节点关系获取元素 |
| document.getElementByTagName() | |
| document.querySelector() |
5.1节点
页面中所有的内容（标签、属性、文本、注释等）都是节点。节点用node表示。
HTML DOM树中的所有节点均可通过JavaScript 进行访问，所有HTML节点均可被修改，也可以创建或删除。
一般的，节点至少由nodeType（节点类型）、 nodeName（节点名称）、 nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为1
- 属性节点 nodeType 为2
- 文本节点 nodeType 为3 （文本节点包括文字、空格、换行等等）
在实际开发中，节点操作主要操作的是元素节点。
5.2节点层级
最常见的是父子兄层级关系。
父级节点
node.parentNode
注意：得到的离元素最近的父级节点（亲爸爸），如果找不到就返回null
子级节点
parentNode.childNodes (标准)
返回包含指定节点的子节点的集合，该集合为即时更新的集合 包含的子节点包含元素节点、文本节点等等
所以用 nodeType 判断，用for循环遍历
parentNode.children (非标准)
得到所有的子元素节点，虽然是非标准的，但是得到了浏览器的支持，所以以后大量使用这个
parentNode.firstChild
返回第一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到
parentNode.firstElementChild
返回第一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）
parentNode.lastChild
返回最后一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到
parentNode.lastElementChild
返回最后一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）
实际开发中的办法：
parentNode.children[i]
兄弟节点
node.nextSibling 得到下一个兄弟节点，包括元素节点和文本节点
node.previousSibling 得到上一个兄弟节点，包括元素节点和文本节点
//下面两个方法只有IE9以上才能兼容 node.nextElementSibling 得到下一个兄弟元素节点，只有元素节点
node.previousElementSibling 得到上一个兄弟元素节点，只有元素节点
创建节点
document.createElement(‘tagName’)
这个方法创建由tagName指定的 HTML 元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以也称为动态创建元素节点。
node.appendChild(child);
它是追加元素，是在指定父节点的子节点的末尾添加。
node.insertBefore(child, 指定元素);
删除节点
node.removeChild(child);
从DOM中删除一个子节点，返回删除的节点
复制节点（克隆节点）
node.cloneNode() 这个方法返回一个节点的副本
注意：
- 如果括号里面的参数为空，那么只是浅拷贝，即只复制节点本身，不克隆里面的子节点
- 如果括号里面的参数为true，那么是深拷贝，复制标签并且复制里面的内容
三种动态创建元素区别
-
document.write()
- 文档流执行完毕之后，他会导致页面全部重绘
-
document.innerHTML()
- 将内容写入某个DOM节点，不会导致页面全部重绘
- 拼接字符串的效率低
- 创建多个元素效率更高，（不要拼接字符串，采取数组形式拼接），结构稍显复杂
-
document.createElement()
- 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML比createElement效率高
- 创建多个元素效率稍低一点点，但是结构更清晰
DOM重点核心（总结）
增
- 创建节点
- document.createElement(‘tagName’)
- node.appendChild(child);
- node.insertBefore(child, 指定元素);
- 创建元素
- document.write( )
- document.innerHTML
- document.createElement()
删
- node.removeChild(child);
改
- 修改元素内容
- element.innerText
- element.innerHTML（推荐）
- 修改普通元素属性，src、href、title等
- 元素.属性 = ‘新值’
- 修改表单元素属性，value、type、disable等
- 元素.属性名 = ‘新值’
- 修改元素样式
- element.style
- element.className
查
- DOM提供的API方法：
- getElementById、
- getElementByTagName
- H5提供的新方法：
- querySelecter、
- querySelectorAll提倡使用
- 利用节点操作获取元素：
- 父（parentNode）
- 子（children）
- 兄（previousElementSibling、nextElementSibling）
参考资料：
1.黑马程序员pink老师——常用Web APIs教程
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
