JS核心之DOM操作下

目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法接上篇,我们先来看常用的三种节点类型. Document 类型 js通过Document类型表示文档. 在浏览器中,document对象是HTMLDocument(继承自Document类型) 的一个实例,表示整个HTML页面. 而且,document对象是window对象的一个属性,可以将其作为全局对象来访问. 1.访问子…

JS核心之DOM操作上

JS一个重要功能就是操作DOM, 改变页面显示. 目录: 1.基本概念 2.节点类型 3.节点关系 4.节点操作基本概念 DOM全称为Document Object Model ,即文档对象模型,是针对HTML和XML的一个API, 描绘了一个层次化的节点树,可以添加.移除和修改页面的某一部分. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构. 节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的HTML为例: <html> <…

js中的DOM操作汇总

一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attribute,属性 Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTe…

【2017-03-28】JS基础、DOM操作

一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式可以放在html页的任意位置,也可以创建一个以js结尾的文件内,将该文件引用到html页内推荐放在<html></html>后边 <script type="text/javascript"> js脚本语言位置 </script> 3.3个常用对话框 alert("警告内容"…

ref 和 React.js 中的 DOM 操作

在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API:以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面更新的效果. React.js 这种重新渲染的机制帮助我们免除了绝…

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…

[笔记]原生JS实现的DOM操作笔记

原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass:原生js添加删除class 原生js添加删除class 代码如下: var dom = { /** 功能说明:匹配元素是否含有指定class * @param el 指定的DOM元素 * @param className 匹配的class名 * */ hasClas…

React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API:以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setSt…

JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点 (3)查找 getElementsByTagName(…

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性 getElementsByTagName(): 通过标签名 getElementsByClassName():…

js基础篇(dom操作，字符串，this等)

首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一定是取出class里面的这个字符串,然后我们想办法判断出这个字符串里面是否存在aa,并且只有aa. 我给大家提供了三种方法,第一种利用getAttribute方法,第二种利用getElementByClassName,第三种就是正则匹配了. 代码如下: /* ***用getAttribute方法实现 */ v…

总结js常用的dom操作（js的dom操作API）

转载:https://www.haorooms.com/post/js_dom_api 前言很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统.不能说是API,今天来系统总结一下! 节点查找API document.getElementById :根据ID查找元素,大小写敏感,…

js中的DOM操作(1)

一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var oUl = document.getElementById…

d3.js入门之DOM操作

上篇成功在vue项目中把d3跑起来了,接下来对d3的基本操作做个汇总: 一.d3元素选择器 d3.select(".skill"):选择第一个类名为skill的元素并返回这个元素对象(实现链式语法) d3.selectAll("p"):选择所有的p标签并返回这些元素对象(实现链式语法) d3.select(".skill").select("p"):选择第一个类名为skill元素下的所有p标签二.d3数据绑定这里是通过da…

js中的DOM操作(2)

1.表格的更加与删除 <!DOCTYPE html> <html> <head> <title>表格操作</title> <style type="text/css"> table{ border: 1px solid black; } tr td{ border: 1px solid black; width: 50px; } </style> </head> <body> &…

【JS基础】DOM操作

appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值…

jQuery核心之DOM操作的常用方法

参考jQuery官网API文档 1..attr() 获取 : ); 3.选择器与常用方法: ) .html( "new text for the third h3!" ) .end() // Restores the selection to all h3s in #content .eq( 0 ) .html( "new text for the first h3!" ); 4.获取或设置元素的信息:g:获取,s设置 .html() ---- g&s .…

JS错误记录 - dom操作 - 排序

本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在sort() 函数里面. 3.arr.sort(function (li1,li2) 这个排序函数的li1, li2表示的是arr[ ] 这个数组里随机的两个数,这个命名和之前的aLi无关.不需要调用aLi为变量. 4. for循环 for ( ) 条件语句末尾一定不能写分号. 分号表示该段…

day45:JS中的json&JS的BOM操作和DOM操作

目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 文本操作 4.4 值操作 4.5 事件 5.用CSS实现小米商城导航栏+主内容部分补充:CSS中的弹性盒子弹性盒子的作用:和line-height一样,可以将内容进行垂直居中显示,并且在使用效果上比line-height更好用 /* css效果 */ .c1{ height: 100px; w…

JS中的函数、BOM和DOM操作

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

js基础总结01 --操作DOM

1.选择对象通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByClassName('p')://类似的还有 document.getElementsByName.document.getElementsByName等通过css选择器来返回第一个匹配的dom节点:document.querySelector('#p1'): 通过css选择器来返回一个类数组的对象集合…

原生JavaScript常用的DOM操作

之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或者库好多都是公司内部自己构建的,所以说到头来还是要原生JavaScript,这里总结了一些原生js常用的dom操作函数. 一:节点关系 //元素的子元素都可以通过someNode下的childNodes对象来访问 var firstChild = someNode.firstChild; //获得第…

原生DOM操作vs框架虚拟DOM比较

1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的.针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应用的时候,你难道为每一个地方都去做手动优化吗?出于可维…