蓝鸥原生JS:什么是DOM及DOM操作
来源:互联网 发布:2017黑马java基础班 编辑:程序博客网 时间:2024/05/01 09:14
蓝鸥原生JS:什么是DOM及DOM操作
零基础学习HTML5—html+css基础【蓝鸥出品】
什么是DOM
DOM:Do
1. js的组成部分
2. 一套标准,目前有DOM1和DOM2这两种标准
我们可以使用DOM操作来操作页面中的元素。
DOM节点
子节点
• childNode:返回值一个数组,放的是父节点中所有的子节点
• nodeType:返回值是一个数组,1表示元素节点,3表示文本节点
在某些浏览器中,如火狐,使用childNode获取所有元素节点时会把空格等一起或取出来,此时就需要使用nodeType来判断。
示例:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 使用childNode获取到所有的li标签,并将背景颜色改为红色
window.onload = function () {
var oUl = document.getElementById('ul');
for (var i = 0; i < oUl.childNodes.length; i++) {
// 判断nodeType的值是否为1
if (oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.backgroundColor ='red';
};
};
}
</script></head><body>
<ul id = 'ul'>
<li></li>
<li></li>
<li></li>
</ul></body></html>
• childern: 取子节点,与childNode相比,chlidren不会把非标签元素解析出来,不用担心兼容性问题
父节点
• parentNode
首尾子节点
IE下的语法
火狐下的语法
含义
firstChild
firstElementChild
首
lastChild
lastElementChild
尾
兄弟节点
IE下的语法
火狐下的语法
含义
nextSibling
nextElementSibling
下一个
previousSilbing
previousElementSibling
上一个
添加元素
createElement(元素名):创建一个元素
父元素.appendChild(子元素)将子元素添加进父元素中(添加在最后边)
示例:点击一次按钮,添加一个li标签
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var oText = document.getElementById('text');
oBtn.onclick =function () {
// 创建一个新标签
var oLi = document.createElement('li');
// 将输入框中的文字写在新li标签中
oLi.innerHTML = oText.value;
// 将新标签添加在父标签里
oUl.appendChild(oLi);
}
}
</script></head><body>
<input type="text" id = "text">
<input type="button" value="点击添加" id = "btn">
<ul id = "ul">
<li>hello</li>
</ul></body></html>
父元素.insertBefore(子元素,在谁之前插入),在谁之前插入子元素
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var oText = document.getElementById('text');
oBtn.onclick =function () {
// 创建一个新标签
var oLi = document.createElement('li');
// 将输入框中的文字写在新li标签中
oLi.innerHTML = oText.value;
// 将新标签添加在父标签里
// oUl.appendChild(oLi);
var aLi = document.getElementsByTagName('li');
// 在第0个元素之前插入新元素
oUl.insertBefore(oLi, aLi[0]);
}
}
</script></head><body>
<input type="text" id = "text">
<input type="button" value="点击添加" id = "btn">
<ul id = "ul">
<li>hello</li>
</ul></body></html>
删除元素
父元素.removeChild(要删除的元素):删除父元素中的某个子元素
示例:点击删除,删除某个元素
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementsByTagName('a');
var oUl = document.getElementById('ul');
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].onclick =function() {
oUl.removeChild(this.parentNode);
}
};
}
</script>
</head><body>
<input type="text" id = "text">
<input type="button" value="点击添加" id = "btn">
<ul id = "ul">
<li>hello<a href="javascript:;">删除</a></li>
<li>123<a href="javascript:;">删除</a></li>
<li>234<a href="javascript:;">删除</a></li>
<li>hel234lo<a href="javascript:;">删除</a></li>
</ul></body></html>
- 蓝鸥原生JS:什么是DOM及DOM操作
- 蓝鸥原生JS:什么是BOM及BOM操作
- 原生js dom操作
- js原生dom操作
- 原生js操作dom
- 原生js 操作dom
- 原生js操作DOM元素
- 蓝鸥原生JS:什么是事件对象及事件类型
- 蓝鸥原生JS:什么是cookie及如何设置cookie
- 蓝鸥原生JS:什么是Ajax及Ajax使用步骤
- 原生JS与jQuery操作DOM对比
- 原生JS与jQuery操作DOM对比
- 浅谈原生JS和jQuery操作DOM
- 原生js对dom点的操作
- 原生JS操作DOM,项目内容积累
- 原生JS的DOM操作汇总
- 原生JS与jQuery操作DOM对比
- 原生js操作dom的笔记整理
- 简述如何嵌套使用Viewpager,点击图片放大查看图片,并且使用PhotoView进行图片处理
- Git与Github连接以及相应操作
- 如何解决cmake时找不到某个库的问题
- “工业4.0”下的可视化工厂建设方案
- Spring@Autowired注解与自动装配
- 蓝鸥原生JS:什么是DOM及DOM操作
- 数据结构 第一章
- CRectTracker-橡皮筋类
- android自定义view 模仿win10进度条
- Android开发之assets目录
- java对象
- Git分支系统
- SVN clean up 乱码路径
- mysql的简单使用