首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS事件篇

父节点.removeChild(子节点):删除子节点 使用innerHTML也可以完成DOM增删改操作 阻止a标签默认行为常用三种方式 a标签索引问题 JS修改元素样式 读取元素内联样式 获取当前元素显示样式...html内容 innerHTML在JS是双向功能:获取对象html内容 或 向对象插入html内容 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取...id为aa对象内嵌内容; 也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=’这是被插入内容’; ---- 读取或者设置节点相关属性...和Innerhtml类似,但是它会自动将html标签去除掉 ---- 获取兄弟节点,也可能会获取到空白节点 获取到空白文本节点 ---- 获取兄弟元素 获取前一个兄弟元素,IE8不支持...等,尽管解决了返回顶部问题但仍存在其他缺陷 (3)事件处理函数工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用JavaScript代码返回被传递给事件处理函数

12.6K10

DOM「建议收藏」

(元素节点(属性节点,文本节点)) 通常可以通过开发者工具(如firebug)查看dom结构,但是要说明一点,开发者工具中DOM并不完整,因为有些元素存在于DOM中,但是不会被开发者工具显示。...=demo; View Code 4、innerHTML innerHTML只对元素节点有用,获取元素节点内容,也就是元素节点包含文本节点。...,因为input里面不包含文本节点,所以用innerHTML获取不到文本节点。...textarea虽然可以访问innerHTML,但是获取是初始文档中,当页面的textarea中发生变化时,innerHTML不会及时更新。有兴趣可自己写demo测试。...五、资源链接 javascript教程 DOM中空白符 w3c12种nodeType 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/168200.html原文链接

82520
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript---网络编程(7)-Dom模型(节点间层次关系,节点增、删、改)

利用节点间层次关系获取节点: 上一节讲了3中获取方式: * ※※一、绝对获取,获取元素3种方式:—Element * 1、getElementById(): 通过标签中id属性获来取该标签对象...–属性 4、下一个兄弟节点:nextSibling–属性 5、使用以上属性时,要小心空白符节点(#Text)存在。...* 1、getElementById(): 通过标签中id属性获来取该标签对象 * 2、getElementsByName(): 通过标签中name属性来获取该标签对象集合...*/ //需求:显示出表格中所有姓名 var children = tabNode.childNodes; //alert(children[0].nodeName...= document.getElementById("div1"); //innerHTML 设置或获取位于对象起始和结束标签内 HTML。

82410

JavaScript学习笔记1

JavaScript技术 1.DOM相关知识 什么是DOM:Document Object Model,文档对象模型 文档:指的是标记型文档(html,xml) 对象:可以使用dom里面的相关属性和方法来解析标记型文档...3.获取文档中元素: 下面的方法是html dom方法 根据标记id属性获取元素对象:document,getElementById(id属性对应) 根据标记名称获取元素对象:document.getElementsByTagName...(标记名称); 根据标记name属性获取元素对象:document.getElementsByName(name属性对应); 1.2 JavaScript概述 什么是JavaScript...表单校验知识点总结:1.错误信息:在一行显示,用他innerHTML属性回显错误信息。...=document.getElementById("phoneId"); //2.2获取错误信息标记对象--span标记 usernameMsg=document.getElementById

1.7K40

关于DOM理解

元素和属性文本内容都是由文本节点来表示。 2——属性节点,代表元素属性。 3——文本节点,只包含文本内容,也可以只包含空白。 4——CDATA段节点。...4、innerHTML innerHTML只对元素节点有用,获取元素节点内容,也就是元素节点包含文本节点。其他节点使用nodeValue。...textarea虽然可以访问innerHTML,但是获取是初始文档中,当页面的textarea中发生变化时,innerHTML不会及时更新。有兴趣可自己写demo测试。...比如给某个链接添加一个onclick事件处理函数,并让这个处理函数所触发JavaScript代码返回布尔true或false。...这样一来,当这个链接被点击时,如果那段JavaScript返回给onclick事件处理函数是true,onclick事件处理函数将认为“这个链接被点击了”;反之如果那段JavaScript代码返回给

89430

javascript dom学习笔记

:用来将标记型文档(什么叫标记型文档?...模型:所有标记型文档都具备一些共性特征(标记型文档所具有的共性有哪些呢?包括标签、属性和标签中封装数据)体现。...4.DOM解析特点     > 只要是标记型文档,DOM技术都可以对其进行操作,比如HTML、XML     > 操作方式:先对文档进行解析,将标记型文档解析为一棵树,并将树中内容封装为节点对象...,1表示标签型节点,2表示属性节点,3表示文本节点     :对于标签型节点是没有,属性和文本节点是可以有。...建议:尽量少用兄弟节点,兄弟节点获取到内容会因为浏览器不同而解析方式不一样,主要是会解析出标签间空白节点 4.创建元素并添加到另一个元素中   演示1:向一个层中添加一个按钮     /

1.8K10

第61节:Java中DOM和Javascript技术

Java中DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需文档只有标记型文档,如我们所学html文档(文档中所有标签都封装成为对象了) DOM: 为Document...DOM:提供解析,将标记文档以及文档中内容都封装成为对象,这样就可以操作对象中属性和行为....根据'id' 标签属性指定第一个对象引用 getElementsByName 根据name标签属性获取对象集合 getElementsByTagName 根据获取指定元素名称对象集合...-- 因为标签都在文档中,所以想要获取标签需要先有document对象 getElementById 获取对 ID 标签属性为指定第一个对象引用 getElementsByName...根据 NAME 标签属性获取对象集合 getElementsByTagName 获取基于指定元素名称对象集合 --> <script type="text/<em>javascript</em>

60620

Java中DOM和Javascript技术

Java中DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需文档只有标记型文档,如我们所学html文档(文档中所有标签都封装成为对象了) DOM: 为Document Object...DOM:提供解析,将标记文档以及文档中内容都封装成为对象,这样就可以操作对象中属性和行为...."> function locationDemo(){  alert(location.href); } getElementById 根据'id' 标签属性指定第一个对象引用...-- 因为标签都在文档中,所以想要获取标签需要先有document对象    getElementById 获取对 ID 标签属性为指定第一个对象引用    getElementsByName...根据 NAME 标签属性获取对象集合    getElementsByTagName 获取基于指定元素名称对象集合     -->    <script type="text/<em>javascript</em>

64330

JavaScript—Element元素对象

然后拿其中几个示例一下: getElementById和className,getElementById可以通过元素id来获取元素对象,className可以返回元素对象类样式选择器名称或给元素对象设置一个类样式选择器...createElement创建一个元素对象,setAttribute设置元素属性,getAttribute得到元素属性,removeAttribute删除元素属性,appendChild添加一个子标记...innerHTML 设置或返回元素年内容,可以用来往页面中添加标签。 代码示例: ? innerHTML是直接添加整个标签,而appendChild则添加是一个创建好元素对象。...接下来介绍几个JavaScript对象: String是JavaScript字符串对象。 代码示例: ? Number是JavaScript原始数值包装对象。 代码示例: ?...使用JavaScript进行表单提交验证: 在这里需要用到一个事件:onsubmit,这个事件会在表单中的确认按钮被点击时触发,然后会根据函数返回来决定提不提交表单。

87410

JS-事件之鼠标、键盘都能控制下拉选框效果

window.onload=function(e){ var box=document.getElementById('divselect...// 点击页面空白处时 document.addEventListener('click',function(){ //注意区分:attachEvent(ie中添加事件监听器方法...,按下向上方向键,选中上一个选项,按下回车键菜单收起,显示选中项 提示: 1、 声明一个全局index变量初值为-1 2、 按下向下方向键时index递增,当递增至大于等于菜单选项总数时恢复为0 3...、 按下向上方向键时判断index,如若小于等于0则设为菜单选项总数,之后递减index 4、 根据index将对应选项设为当前(灰色背景) 5、 按下回车键时将对应选中选项设为菜单标题,且将所有选项设为无背景...注意:要考虑到浏览器兼容,使用innerHTML,不要使用innerText 四、点击页面空白处收起菜单 提示: 1.绑定在document对象上 慕课练习题:http://www.imooc.com

3.2K50

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!...frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"> <script language="<em>javascript</em>...("loading");           loader.innerHTML      = "";           loader.style.display = "none";           ...= "visible"; } 以下是依葫芦画瓢方法: ①、在 iframe 代码之前先插入一个 div 用于 iframe 载入前显示,除了 id 需要一一对应,其他自行发挥即可...(this)  ③、如代码 8~28 行新增 2 个 js 函数即可,注意上下元素 ID 需要一 一对应; ④、其中 22 和 23 行禁止 iframe 未加载完成空白占位,只有加载完成之后,才会将

2K40

JS起步阶段随笔【JavaScript

JavaScript 组成 JavaScript 包含两个部分,语法和webAPIs(BOM、DOM) 标签位置 一般写在</head...; 原生JS标签定位方法 getElementsBytagName(); 该方法可以获取某标签类型所有元素,其返回就是一个伪数组(数组模样,但没有数组方法),例如: var divs...设置空白页 如果窗口还开着,就设置为空白页 if(window){ window.location.href="about:blank"; } 页面跳转 //跳转或打开一个新网页 window.open...显示当前时间 2016/12/21 上午12:00:00 // 这个cg就是spanid,初始化Date时间并转化为字符...type 注明,不然 JavaScript就会失败,读不到 如何获取复选框value 获取复选框 var 和 let 区别 块作用域 在块作用域中两者区别较为明显, let

51420

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)

上一博文种讲解了JavaScript基础ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要两部分内容BOM、DOM及事件,后文中有对应实战练习。...1、DOM简单学习 DOM是用来控制html文档内容: 1)document.getElementById("id"):通过元素id获取元素对象Element。...2)操作Element对象: 修改属性:要明确获取对象是哪一个,再查看API,找其中有哪些属性可以设置; 修改标签体内容:通过属性innerHTML修改 <!...、与弹出框有关:                        alert(),显示有一段消息或警告窗口;                        confirm(),显示一段消息以及确认和取消按钮对话框...4、DOM对象 DOM,Document Object Model,文档对象模型,就是将标记语言文档各个组成部分封装为对象,可以使用这些对象对标记语言文档进行CRUD操作。 ?

2.2K40

前端基础:HTML

-- 注释不会在浏览器中显示 --> 标签 br 标签就是一个换行功能标签 标签 在 p 标签中内容会在开始与结束之间产生一个空白行并且它会自动换行 常用属性 align 作用是设置段落中内容对齐方式...注意:在 HTML 中允许标签进行嵌套,但是一般都包裹嵌套,而不可以进行交叉嵌套 清单标记(列表标记) 有序清单: <!...width 图片宽度 height 图片高度 border 用于设置图片边框 alt 如果图片不可以显示时,默认显示文本信息 align 图片附件文字对齐方式,取值有 :left right...HTML DOM 属性是可以在节点(HTML 元素)设置和修改。 可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。...方法是能够执行动作(比如添加或修改元素)。属性是能够获取或设置(比如节点名称或内容)。 <!

1.8K20
领券