【js-DOM操作基本知识】的更多相关文章

JS DOM操作（创建、遍历、获取、操作、删除节点）

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic…

js dom 操作

JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterval("要执行的代码",间隔的毫秒数) 清除间隔执行:window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码延迟一段时间执行某一段代码(函数):window.setTimeout("要执行的代码",延迟的毫秒数) 清除延迟:windo…

javascript DOM 操作基础知识小结

经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.…

JS—DOM操作

节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById();参数传递一个元素的id值,这样就可以获取到该元素节点 DOM操作必须等待HTML文档加载完毕,才可以获取 怎样获取? 1.把<script>移后 HTMLDivElement表示Div的节点对象 IE是以COM实现的DOM,所以只会返回一个object 2.用onload事件来加载html…

js——DOM操作（一）

DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这颗树中的每一个元素(节点) DOM节点 如: getElementById getElementByTagName document document.body ... //*************************************** childNode…

JS DOM操作 函数 事件 阻止事件冒泡

一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取       从索引2开始截取,截取8个字符长度 s.split( ):               -- 指定字符分割,返回一个数组.    括号里放一个字符,按照这个字符分割s s.length :               -- 长度 s.indexOf( );        -- 在字符串中第一次…

JS DOM操作（五） Window.docunment对象——操作元素

定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a 的下一个同辈元素, var b = a.previousSibling;     -- 找 a 的上一个同辈元素, <html > <head> <title></title> <style type ="text/css"> .…

JS DOM操作（二） Window.docunment对象——操作样式

一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  --  根据 id 最多只能找一个       var  a  =  document.getElementById( "id 名" )                                             -- 将找到的变了放到变量 a 中 用 class 定位      …

JS DOM操作（一） 对页面的操作

DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM. DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.. Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等, Dom技术使得页面的交互性大大地增强. 对一个元素进行点击操作   var  v  =  …

js dom 操作技巧

1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写. var div = document.createElement("div"); 使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以操作元素的特性. div.id = &quo…

js DOM操作练习

1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue="1">text1</option>    <option vlue="2">text2</option>    <option vlue="3">text3</option>   …

封装的一些常见的JS DOM操作和数据处理的函数.

//用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(document.getElementsByClassName) { return context.getElementsByClassName(className); } else { var i; var arr = []; var elements = context.getElementsByT…

Js dom操作总结

1.选取文档元素 1.1. getElemenById 基于唯一id获取,任何HTML元素可以有id属性,在文档中该值必须唯一. 1.2. getElementsByName 基于name属性的值选取HTML元素. 1.3. getElementsByTagName 通过标签名选取元素,document.getElementByTagName("div") 1.4. getElementsByClassName 通过css类选取元素 1.5. querySelectorAll() 终极…

JS DOM操作

一.DOM基础 1.节点(node)层次 Document--最顶层的节点,所有的其他节点都是附属于它的. DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点. DocumentFragment--可以像Document一样来保存其他节点. Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>.这是唯一可以同时包含特性和子节点的节点类型. Attr--代表一对特性名…

js dom操作获取节点的一些方法

在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next = eleObj.nextSibling; if(next.nodeType == 3){ // 文本节点 return next.nextSibling; } return next; } //js获取上一个兄弟节点 function getPreviousSibling(eleObj){ va…

js——DOM操作（二）

表格属性: tHead:表格头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表单操作: <form id="form1"> <input type="text" id="text1" name="username" value="" /> </form> 获取元素,可以通过name来获取,方法是:表单.元素name    即,oForm.u…

js DOM操作---登录例子总结

简单的总结下用 javascript DOM 实现简易登录框例子,下面是简单的模拟登录,没有具体的登录样子,但只是模拟,整理下思路. 页面简单布局,我这个确实太简单了,看代码: <body> <div id="box"></div> </body> 这里给 box 简单的样式: #box { width: 400px; height: 300px; background: #ccc; border: 10px solid #f00; }…

常见的js dom操作

1.查找  document.getElementById('id属性值');  返回拥有指定id的第一个对象的引用  document/element.getElementsByClassName('class属性值');  返回拥有指定class的对象集合 document/element.getElementsByTagName('标签名');  返回拥有指定标签名的对象集合   document.getElementsByName('name属性值');  返回拥有指定名称的对象结合 2…

JS DOM 操作 项目总结 【超链接】【数列】【span】

  超链接   每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母). “爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA.定义A链接样式的正确的顺序:a:link.a:visited.a:hover.a:active. a:link,    定义正常链接的样式: a:visited,  定义已访问过链接的样式: a:hover,   定义鼠标悬浮在链接上时的样式: a:a…

JS DOM操作（四） Window.docunment对象——操作内容

操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.innerHTML;       将 a  定位的元素内容取出放入 s 中 -- 会把此元素下的所有文本及标记代码取出来. var s = a.innerText; -- 值会把此元素下的文本取出来,标记不予理会. 2.对内容赋值 a.innerHTML = "值": -- 会把标记执行渲染 a.…

JS DOM操作（三） Window.docunment对象——操作属性

属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终被包括在引号内.双引号是最常用的,在某些个别的情况下,比如属性值本身就含有双引号,必须使用单引号, 属性总是在 HTML 元素的开始标签中规定. 属性实例 HTML 链接由 <a> 标签定义.链接的地址在 href 属性中指定: < a href="http://www.baidu…

js dom操作选择器，dom操作复习

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{padding:20px;} @-webkit-keyframes start1 { 0%,30% {opacity: 0;-webkit-transform: translate(0,8px);} 60…

js DOM操作 容易犯的错误

这样一段html片段 <select class="form-control" id="course_chapter" onchange="fill_course_section(this)"> <option value="0">--选择章节--</option> <option value="1">第一章 鲁迅</option> <opt…

JS DOM操作案例

显示隐藏表单文本内容 <input type="text" value="手机"> var text = document.querySelector("input") // 获取焦点 text.onfocus = function () { if (this.value === '手机') { this.value = '' } } // 失去焦点 text.onblur = function () { if (this.value…

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 <!DOCTYPE html> <html> <head&…

day29—JavaScript中DOM的基础知识应用

转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通过对DOM的基本了解,还要通过代码实现对DOM的操作. 1.childNodes + nodeType 与children的区别 <ul id= "ull"> <li>1</li> <li>2</li> <li>3&l…

JS中的函数、BOM和DOM操作

 一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1)函数的声明格式 function 函数名(参数1,参数2,......){ //函数体代码 return 返回值; }     (2)函数的调用 ① 直接调用:函数名(参数1的值,参数2的值,......); ② 事件调用:直接在HTML标签中,直接使用事件名="函数名()"; eg. &…

从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一块的东西收集整理一下,免得每次为了得到一个值要上网查询鼓捣一万年,实在是浪费时间,知其然知其所以然,才能让问题迎刃而解. 这篇博文应该说结构还不够完整,有些知识点还没提到,覆盖的内容其实主要还是为了满足我现在入门知识理解的一个需求,日后再进行完善吧,这里先贴一些相关概念的参考链接,以后方便参考和添加…

JQuery 基本知识，选择器，事件，DOM操作

一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的API,可以工作在众多的浏览器.结合多功能性和可扩展性,jQuery已经改变了数百万人编写JavaScript的方式.二.选择器 基本选择器: 基本: ID选择器:$("#ID") Class选择器:$(".Class") 标签选择器:$("标签名")…

js练习【DOM操作】

完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>[js小练习]:DOM操作</title> </head> <body> <div id="testField&qu…