了解javascript中的Dom操作

2024-07-28 20:27:25

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元素的常见方式示例

本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素
浅谈JavaScript_DOM学习篇_图片切换小案例

今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.getElementById("id"); 根据标签获取元素: 如: var xx = document.getElementsByTagName("div"); <!DOCTYPE html> <html lang="en">
JavaScript学习笔记之DOM操作实例分析

本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式二.节点 1. 元素节点 :<body> <
JavaScript学习笔记之DOM基础操作实例小结

本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&
了解javascript中的Dom操作

DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点结点的注意点: 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用"结点"称呼它 3.结点的关系有:父子关系.兄弟关系 1.获取元素结点 1)直接获取 ① document.getElementById() ② document.ge
详解jQuery中的DOM操作

大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作看看DOM操作都有哪些逐一来看先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=
jQuery学习笔记[1] jQuery中的DOM操作

DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML
JavaScript中BOM,DOM和事件的用法详解

目录 BOM 概念对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分核心DOM模型 HTML DOM 事件监听机制概念常见的事件事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo
AngularJS中的DOM操作用法分析

本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中
Angular2学习教程之组件中的DOM操作详解

前言有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素. 指令中的DOM操作 @Directive({ selector: 'p' }) export class TodoD
JavaScript中数组常见操作技巧

效果图如下所示: Tip: 右键在新标签中打开查看清晰大图下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作创建数组一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组 // good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['广州', 50] ]; // bad var arr = new Object()
JavaScript中使用ActiveXObject操作本地文件夹的方法

在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <t
react中的DOM操作实现

目录前面的话使用场景 ref [HTML元素] [类组件] [函数式组件] [对父组件暴露DOM节点] 非受控组件 [默认值] ReactDOM [render()] [unmountComponentAtNode()] [findDOMNode()] 新ref 前面的话某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景下面是几个适合使用 refs 的情况 1.处理焦点.文本选择或媒体控制
javascript中关于去重操作的使用

目录前言: 核心的基本算法数据去重的基本用法 1.数组去重 2.字符串去重 3.数字去重最后前言: 前端开发里面,在JS中关于数据去重操作的使用是非常常用,也是非常重要的点,一般情况下关于对数组去重点操作是最常用的,其次是具体的关于某一数据类型的去重操作,如字符串去重.数字去重等.那么本篇博文就来分享一下去重操作的使用,方便后期查阅使用. 核心的基本算法遍历拿到的数据数组,然后把该数组中的元素存放到新的数组中,在存放到新数组之前要检查数组的元素是否已经存在,如果存在(相同元素,即重复元

了解javascript中的Dom操作

相关推荐

随机推荐