当前位置: 首页 > news >正文

JavaScript基础(三)

文章目录

简介

一、DOM介绍

二、DOM节点划分类型

1.元素节点(具体的标签例如:html,head,title,p,h1等)

2.属性节点(元素中的属性)

3.文本节点(文本内容)

三、节点关系

        父子关系(parent-child):

        兄弟关系(Sibling):

四、DOM操作内容:

        1. 查询元素/获得元素(进行操作元素,或者元素的属性,文本)

        2. 操作属性

       

         3. 操作CSS样式(一个特殊的属性style)

       4. 操作文本

5. 操作元素节点(增加节点/删除节点)


简介

DOM结构节点类型划分:元素,属性,文本。 节点的关系

DOM元素的操作,操作元素,操作元素属性,操作css样式,操作文本内容,操作元素节点


一、DOM介绍

DOM(Document Object Model)即文档对象模型。用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。由一系列对象组成,访问、检索、修改XHTML文档内容与结构的标准方法. 是跨平台语言,顶层是document对象。

二、DOM节点划分类型

1.元素节点(具体的标签例如:html,head,title,p,h1等)
2.属性节点(元素中的属性)
3.文本节点(文本内容)

三、节点关系

        父子关系(parent-child):

                <html>元素作为父级,<head>和<body>元素作为子级。

        兄弟关系(Sibling):

                <a>和<h1>元素就是兄弟关系。

四、DOM操作内容:

        1. 查询元素/获得元素(进行操作元素,或者元素的属性,文本)

        获得/查询元素(直接/简介获得对象的方式,id,name,标签名 |子节点,父节点,上节点,下节点):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM节点对象获得方式</title><script>// ------------直接获得节点对象的方式function demo1(){// id方式直接获得---单个对象var  username =   window.document.getElementById('username')alert(username)}// 通过标签名获得多个元素对象function demo2(){var inp = document.getElementsByTagName('input')alert(inp)alert(inp[2])alert(inp.length)}// 通过name属性获得function demo3(){var inp = document.getElementsByName('hobby')alert(inp.length)}//-------- 间接获得元素对象的方式 (父节点,子节点)function demo4(){// 获得父节点后,找到下面的子节点var professional = document.getElementById('professional');var child = professional.childNodesconsole.log(child)  //空白为本也算一个节点,所以长度是9}function demo5(){//获得节点id ,找到父节点var p2 = document.getElementById('p2')var parent = p2.parentNodeconsole.log(parent)}function demo6(){// 获得下一个节点 var p2 = document.getElementById('p2')// var next = p2.nextSibling.nextSibling   //包含空白文档var next = p2.nextElementSibling        //不包含空白文档console.log(next)// 获得上一个节点// var up = p2.previousSibling.previousSibling     //包含空白文档var up = p2.previousElementSibling              //不包含空白文书console.log(up)}</script></head>
<body onload="demo6()"><form action="" id="form1">用户名:<input type="text" name="username" id="username" value="输入姓名"><br/>密码:<input type="password" name="pwd" id="pwd"><br/>爱好:<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="art">绘画<input type="checkbox" name="hobby" value="sports">体育 <br/>职业:<select name="professional" id="professional"><option value="1">工人</option><option value="2" id="p2">技术人员</option><option value="3">教育职业</option><option value="4">医疗行业</option></select></form>
</body>
</html>

        2. 操作属性

    获得元素的属性,操作元素的属性


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作元素属性</title><script>function demo1(){// 方式一(常用,实时更新):-------获得节点对象的属性,操作元素的属性//获得id名称是inp1对象节点var inp1 = document.getElementById('inp1')//获得对象的属性var ty = inp1.typevar na = inp1.namevar va = inp1.valuealert(ty+'---'+na+'---'+va)//操作元素属性inp1.type = 'button'inp1.value = '测试改变'//方式二(默认值,不会改变):---------获得元素的属性//获得对象属性的默认值var ty1 = inp1.getAttribute('type')var na2 = inp1.getAttribute('na')var va2 = inp1.getAttribute('value')alert(ty1+'===='+na2+'==='+va2)//     //操作元素属性(//     inp1.setAttribute('type','button')}</script>
</head>
<body><input type="text" name="uname" id="inp1" value="张三"/><br /><input type="button"  name="" value="测试元素属性" onclick="demo1()">
</body>
</html>
       
         3. 操作CSS样式(一个特殊的属性style)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作元素样式</title><script>function demo1(){var div1 = document.getElementById('div1')//获得css样式,只支持行内样式cssvar wi = div1.style.widthvar he = div1.style.heightalert('width:'+wi+'----'+'heigth:'+he)//操作元素的css样式   对于background 格式的样式在js中使用驼峰命名法进行改变div1.style.width = '300px'div1.style.height = '300px'div1.style.backgroundColor = 'red'//增加样式:通过增加class类来增加对应的css样式,    注意:classNamediv1.className = 'div2'}</script><style>.div2{border: 4px solid rgb(0, 0, 0);}</style></head>
<body><!-- 行内样式的css --><div id="div1" style="width: 200px; height: 200px; background-color: palegoldenrod;"></div><input type="button" neme="" id="" value="操作样式" onclick="demo1()">
</body>
</html>
       4. 操作文本

       获取文本内容,修改文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作文本内容和值</title><script>function demo1(){//获得div1的对象var div = document.getElementById('div1')//获得元素的文本内容var inn = div.innerHTML   //获得整个格式,会s识别html中的标签信息  适用于双标签var inn2 = div.innerText  //只获得文本                      适用于双标签console.log(inn)console.log(inn2)div.innerHTML += '<h1>1号标签</h1>'// div.innerText += '<h1>1号标签</h1>'}function demo2(){var in2 = document.getElementById('inp2')var va = in2.value   //不加括号alert(va)}/*注意:双标签有innerHTML 和 innerText单标签获都是用value 获得,和获得属性一样双标签中有两个特殊的标签:select textarea 使用.value*/function demo3(){//获得select对象var sel = document.getElementById('sele')alert(sel.value)  //没有value属性,直接获取文本,有value属性获得属性值}function demo4(){var te = document.getElementById('tex')alert(te.value)}</script>
</head>
<body><div id="div1"> <span>双标签我们不一样</span></div><input type="button" value="操作元素的文本内容" onclick="demo1()"><br/><input type="text" name="inp2" id="inp2" value="" ><input type="button" value="单标签操作" onclick="demo2()"> <br/><select id="sele" onchange="demo3()"><option value="0">--请选择--</option><option value="1">中国</option><option >英国</option><option >俄罗斯</option></select> <br /><textarea id="tex" rows="10" cols="10">12354</textarea><input type="button" value="特殊的双标签" onclick="demo4()"></body>
</html>
5. 操作元素节点(增加节点/删除节点)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作元素节点对象</title><script>function addNode(){//获得表单对象var fom = document.getElementById('fom')//创建节点的方法  先创建一个p节点,在增加input(file)节点,在增加一个删除节点var p = document.createElement('p')p.innerText='照片'var inp = document.createElement('input')inp.type = 'file'var inp2 = document.createElement('input')inp2.type = 'button'inp2.value = '删除'//删除方法inp2.onclick=function(){//移除子节点p.removeChild(inp)p.removeChild(inp2)//移除本身p.remove()}//添加节点对象 // fom.appendChild(p)//获得最后一个节点对象var lastNode = document.getElementById('lastNode')//在指定元素之前添加节点fom.insertBefore(p,lastNode)p.appendChild(inp)p.appendChild(inp2)}</script>
</head>
<body><form id="fom"><p>用户名:<input type="text"></p><p>照片:<input type="file"><input type="button" value="添加" onclick="addNode()"></p><p id="lastNode"><input type="button" name="" id="" value="提交"><input type="button" name="" id="" value="清空"></p></form></body>
</html>

http://www.dtcms.com/a/273151.html

相关文章:

  • 一文讲清楚React Hooks
  • 解决问题的“测地线”:关于第一性原理与其他系统思考框架
  • RocksDB 与 ZenFS:原理、特性及在科研与工程中的应用初步探索
  • 使用Arthas监听Spring代理对象
  • 从UI设计到数字孪生实战部署:构建智慧教育的在线学习分析平台
  • Java观察者模式实现方式与测试方法
  • Constants
  • SSM 框架整合教程:从环境搭建到 CRUD 实现
  • html页面,一个控件,可以粘贴图片和样式,一直按enter键会将下面内容推下去
  • OrCAD 24.1补丁005中文界面切换指南
  • QT Android 如何打包大文件到目录下?
  • 【Pandas】pandas DataFrame from_records
  • Android开发中几种scope的对比
  • ClickHouse JSON 解析
  • Kubernetes Dashboard UI 部署安装
  • stm32计时的两个方法
  • HarmonyOS学习记录4
  • 基于U-net的高阶心音信号去噪系统设计与实现
  • SSE方式调用php,不是直接 post,
  • 【C++基础语法】
  • STM32F103之ModBus\RS232\RS422\RS485
  • 瑞幸X多邻国“疯感”营销:以情感共鸣取代硬广触达
  • Qt开发:QtConcurrent介绍和使用
  • Python正则表达式实战指南
  • 深度学习13(经典卷积网络结构+卷积网络结构优化)
  • J1939协议
  • 个体户核定多地暂停,将不再享受核定征收?
  • 人工智能-基础篇-29-什么是低代码平台?
  • 大数据学习6:Sqoop数据迁移工具
  • ArcGIS 打开 nc 降雨量文件