了解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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JS中递归函数
Jun 17 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
Js apply方法详解
Feb 16 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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
You might like
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
解决python 文本过滤和清理问题
2019/08/28 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python将字母转化为数字实例方法
2019/10/04 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
拔河比赛口号
2014/06/10 职场文书
营销学习心得体会
2014/09/12 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS