首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

了解javascript中的Dom操作

Posted in Javascript onMay 27, 2019

DOM（Document Object Model）：

结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。

结点类型

1.元素结点
2.属性结点
3.文本结点

结点的注意点：

1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点，将html标签看作是一个对象，并用“结点”称呼它
3.结点的关系有：父子关系、兄弟关系

1.获取元素结点

1)直接获取

① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()

2)间接获取

父子关系
firstChild lastChild childNodes

子父关系
parentNode

兄弟关系
nextSibling previousSibling

2.操作属性结点

1)通过对象“.”属性，来操作属性
优：可以动态获取用户修改的属性值
缺：不能获取自定义属性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优：可以获取自定义属性的值
缺：不能动态获取用户修改的属性值

3.处理文本结点

1) 通过对象.innerText 获取标签内部的文本信息

2) 通过对象.innerHTML 获取标签内部的HTML代码

4.动态改变DOM结构

1)创建一个结点对象
document.createElement("标签名")

2)（父结点）追加子结点对象
fatherNode.appendChild(子结点对象)

3)（父结点）在指定结点前添加子结点
fatherNode.insertBefore(新结点对象，参考结点对象)

4)（父结点）替换旧的子结点对象
fatherNode.replaceChild(新结点对象，旧结点对象)

5)（父结点）删除旧子结点对象
fahterNode.removeChild(旧结点对象)

5.动态改变元素的CSS样式（不重要）

1)我们通过对象.style属性操作对象的css样式：样式名称中有“-”将“-”去掉，并将“-”后一个字母改为大写来作为样式的新名称

2)我们希望通过class为一个对象添加一个class样式，添加属性名是className，而并非class（class是js的关键字，并能作为属性名存在）

<script type="application/javascript">
//1.获取元素结点
//1)直接获取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 获取的是一个数组
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
// 获取指定位置
console.log(sons[1]);
// firstChild 获取第一个
console.log(father.firstChild);
// lastChild 获取最后一个
console.log(father.lastChild);
}
// 子父关系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟关系 nextSibling 下一个对象 
//previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
//将昵称的样式改为password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
// 可以获取改变后的属性
console.log(obj.value)
// 只能获取初始定义的属性
console.log(obj.getAttribute("value"));
}
// 1) 通过对象.innerText 获取标签内部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通过对象.innerHTML 获取标签内部的HTML代码
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
// 添加文本
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "<img src='1.jpg' />";
}
// 添加代码
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<img src='1.jpg' />";
}
</script>
</head>
<body>
<button onclick="getEle1();">点我测试1</button>
<button onclick="getEle2();">点我测试2</button>
<button onclick="getEle3();">点我测试3</button>
<button onclick="getEle4();">点我测试4</button>
<button onclick="getEle5();">点我测试5</button>
<button onclick="getEle6();">点我测试6</button>
<hr/>
<button onclick="getField1();">属性测试1</button>
<hr/>
<button onclick="getText1();">文本测试1</button>
<button onclick="getText2();">文本测试2</button>
<button onclick="getText3();">文本测试3</button>
<button onclick="getText4();">文本测试4</button>
<hr/>
<form id="regForm">
用户名：<input id="userid" type="text" name="username"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别：男<input type="radio" name="gender" value="nan">  
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
<div id="myDiv"><b>hello</b></div>
</body>

动态改变DOM结构

1)创建一个结点对象

document.createElement("标签名")

<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();">创建结点对象</button>

2)（父结点）追加子结点对象

fatherNode.appendChild(子结点对象)

function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子结点对象</button>

3)（父结点）在指定结点前添加子结点

fatherNode.insertBefore(新结点对象，参考结点对象)

function changeDom3() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子结点对象</button>

4)（父结点）替换旧的子结点对象

fatherNode.replaceChild(新结点对象，旧结点对象)

function changeDom4() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替换子结点对象</button>

5)（父结点）删除旧子结点对象

function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();">删除子结点对象</button>

动态改变元素的CSS样式（不重要）

<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5.动态改变元素的css样式
1)我们通过对象.style属性操作对象的css样式：样式名称中有“-”将“-”去掉，并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式，添加属性名是className，而并非class（class是js的关键字，并能作为属性名存在）
*/
function fontGreater(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv);
myDiv.style.fontSize = "36px";
myDiv.style.fontFamily = "宋体";
}
function changeFont(){
var myDiv = document.getElementById("myDiv");
myDiv.className = "addstyle";
//myDiv.setAttribute("class","addstyle");
}
</script>
</head>
<body>
<button onclick="fontGreater()">放大字体</button>
<button onclick="changeFont()">添加样式</button>
<div id="myDiv" >你好世界！</div>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

了解javascript中的Dom操作

- Author -

___mouM

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
layui文件上传实现代码
May 20 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
webpack(1) calc(1) Hive(5) swing(1) Windows Server 2022(3) NTP(1) Windows Server(4) OpenFeign(1) SandBox(1) K8s(1)
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python选择排序算法实例总结
2015/07/01 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python实现FTP文件传输的方法（服务器端和客户端）
2020/03/20 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
英国最大的在线快递公司之一：ParcelHero
2019/11/04 全球购物
土耳其新趋势女装购物网站：Addax
2020/01/07 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
阅兵口号
2014/06/19 职场文书
为什么中国式养孩子很累？
2019/08/07 职场文书
python 如何用terminal输入参数
2021/05/25 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android