JS day03笔记

本文介绍了HTML中节点的创建、插入、查找、替换、克隆和删除等操作方法,如createElement()创建节点、appendChild()插入节点等。还阐述了获取表单、input元素、单选按钮、多选按钮、下拉选项的方式,以及表单提交的get和post请求类型及特点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一. 创建节点
1.createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
2.createTextNode() 创建一个文本节点,可以传入文本内容
3.nnerHTML 也能达到创建节点的效果,直接添加到指定位置了

二. 插入节点
1.write() 将任意的字符串插入到文档中
document.write()在加载文档时使用,会和当前文档使用同一个document对象,所以写入的内容会显示在原来的内容之后;
document.write()在加载文档之后使用(点击按钮触发事件使用),此时document是一个新的对象,会将原来的document对象覆盖,所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
2appendChild() 向元素中添加新的子节点,作为最后一个子节点
3.insertBefore() 向指定的已有的节点之前插入新的节点
newItem:要插入的节点
exsitingItem:参考节点
需要参考父节点
三. 间接查找节点
1.childNodes () 返回元素的一个子节点的数组 (包括文本节点)
2.firstChild() 返回元素的第一个子节点
3.lastChild() 返回元素的最后一个子节点
4.nextSibling 返回元素的下一个兄弟节点
5.parentNode 返回元素的父节点
6.previousSibling 返回元素的上一个兄弟节点
四. 替换节点
1.replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点,然后用新的节点替换旧节点
五. 克隆节点
1.cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true:深度克隆,可以克隆结构和内容
false(默认值):只克隆结构
六. 删除节点
1.removeChild() 从元素中移除子节点
从父元素中删除节点,获取要删除对象的父元素,然后从父元素中删除该对象
七. 获取表单
1.document.表单名称
2.document.getElementById(表单 id);
3.document.forms[表单名称]
4.document.forms[索引]; //从 0 开始
八. 获取 input 的元素
如 text password hidden textarea 等,前两种常用。
1.通过 id 获取:document.getElementById(元素 id);
2.通过 form.名称形式获取: myform.元素名称;  name 属性值
3.通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
4.通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] //从 0 开始
九. 获取 单选按钮
前提:将一组单选按钮设置相同的 name 属性值
1.获取单选按钮组:
document.getElementsByName(“name 属性值”);
2.遍历每个单选按钮,并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中,否则未被选中
选中状态设定: checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定: 没有 checked 属性 或 checked=’false’
十. 获取 多选按钮
前提:将一组多选按钮设置相同的 name 属性值
1.获取多选按钮组:
document.getElementsByName(“name 属性值”);
2.遍历每个多选按钮,并查看多选按钮元素的 checked 属性
若属性值为 true 表示被选中,否则未被选中
选中状态设定: checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定: 没有 checked 属性 或 checked=’false’
十一. 获取下拉选项
1.获取 select 对象:
var ufrom = document.getElementById(“ufrom”);
2.获取选中项的索引:
var idx=ufrom.selectedIndex ;
3.获取选中项 options 的 value 属性值:
var val = ufrom.options[idx].value;
注意:当通过 options 获取选中项的 value 属性值时,
若没有 value 属性,则取 option 标签的内容
若存在 value 属性,则取 value 属性的值
4.获取选中项 options 的 text:
var txt = ufrom.options[idx].text;
选中状态设定:selected=‘selected’、selected=true、selected
未选中状态设定:不设 selected 属性
十二.表单提交类型
1.get请求:参数会直接跟在地址栏后面显示,请求参数的长度有限,相对post而言不安全,不会自动刷新缓存;每次访问时优先获取缓存中的数据,所以请求速度快。
2.post请求(需要服务器的支持):参数不会跟在地址栏后面显示,请求参数长度不限(其实是有长度限制,与服务器相关),相对而言安全,会自动刷新缓存;请求速度相对而言慢。
通常做查询操作,使用GET请求;增删改使用POST请求。

一、综合实战—使用极轴追踪方式绘制信号灯 实战目标:利用对象捕捉追踪和极轴追踪功能创建信号灯图形 技术要点:结合两种追踪方式实现精确绘图,适用于工程制图中需要精确定位的场景 1. 切换至AutoCAD 操作步骤: 启动AutoCAD 2016软件 打开随书光盘中的素材文件 确认工作空间为"草图与注释"模式 2. 绘图设置 1)草图设置对话框 打开方式:通过"工具→绘图设置"菜单命令 功能定位:该对话框包含捕捉、追踪等核心绘图辅助功能设置 2)对象捕捉设置 关键配置: 启用对象捕捉(F3快捷键) 启用对象捕捉追踪(F11快捷键) 勾选端点、中心、圆心、象限点等常用捕捉模式 追踪原理:命令执行时悬停光标可显示追踪矢量,再次悬停可停止追踪 3)极轴追踪设置 参数设置: 启用极轴追踪功能 设置角度增量为45度 确认后退出对话框 3. 绘制信号灯 1)绘制圆形 执行命令:"绘图→圆→圆心、半径"命令 绘制过程: 使用对象捕捉追踪定位矩形中心作为圆心 输入半径值30并按Enter确认 通过象限点捕捉确保圆形位置准确 2)绘制直线 操作要点: 选择"绘图→直线"命令 捕捉矩形上边中点作为起点 捕捉圆的上象限点作为终点 按Enter结束当前直线命令 重复技巧: 按Enter可重复最近使用的直线命令 通过圆心捕捉和极轴追踪绘制放射状直线 最终形成完整的信号灯指示图案 3)完成绘制 验证要点: 检查所有直线是否准确连接圆心和象限点 确认极轴追踪的45度增量是否体现 保存绘图文件(快捷键Ctrl+S)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值