JS基础---Dom的基本操作
DOM的增删改查
增:
1.创建一个元素节点
document.createElement()
创建新的<p> 元素:var para=document.createElement("p");
2.创建一个文本节点
document.createTextNode()
var node=document.createTextNode("This is a new paragraph.");
3.在已存在的元素中追加新元素
element.appendChild()
向 <p> 元素追加这个文本节点: para.appendChild(node);
4.创建属性节点
document.createAttribute()
5.在已存在的节点前添加一个新元素
insertBefore(所要添加的新节点,已存在的节点)
删:
1.删除节点
removeChild()
2.删除属性
removeAttribute()
3.替换节点
replaceChild(要插入的新元素,将被替换的老元素)
4.复制节点
cloneNode(true/false)
true:复制当前节点及子节点
false:仅复制当前节点
改:
1.修改html元素的内容
document.getElementById(id).innerHTML="新内容"
2.修改元素的属性
document.getElementById(id).属性="新值"
或者
元素节点.setAttribute(属性,值)
3.修改元素的CSS样式
document.getElementById(id).style.样式="新值"
查:
1.通过id查找HTML元素节点
document.getElementById(元素id)
2.通过元素的name属性查找HTML元素节点
document.getElementsByName(元素的name属性)
3.通过元素标签查找HTML元素节点
document.getElementsByTagName(元素标签)
4.获取元素的指定属性节点
元素节点.getAttribute(元素属性名)
附:
jQuery DOM的增删改查
增:
1.创建元素节点
直接使用$(html)工场函数来创建Dom对象
var $new=$("<p id="title">创建元素节点</p>")
2.创建文本节点
在创建元素节点时,可以一起创建
3.创建属性节点
同上
删:
1. remove() 将该节点及包含的所有后代节点都删除
2. empty() 清空节点,清空此元素的内容
3.removeAttr() 删除某个元素的特定属性
4.removeClass() 移除样式
改:
1.获取、设置HTML、文本的值
html() 读取或设置某个元素中的html内容,同 js 中的innerHTML属性
text() 读取设置某个元素的文本内容,同 js 中的innerText属性
vue() 可以用来获取和设置元素的值,同 js 中value属性
2.获取、设置属性
attr() 只需给该方法传递一个参数,即属性名称
3.获取、设置CSS样式
attr(class , "样式类") 设置样式
css("样式" , "值") 设置样式
addClass(“样式类”) 追加样式
toggle( function(){//显示} , function(){//隐藏} ) 交换一组动作
toggleClass() 控制样式上的重复切换
hasCLass() 判断元素中是否含有某个class,有则返回true
5.插入节点
append() 向匹配的元素内部追加内容
appendTo() 将匹配的内容追加到
prepend() 向匹配的元素内部前置内容
prependTo() 将匹配的元素前置到
after() 在匹配的元素后插入内容
insertAfter() 反之
before() 在匹配的元素前面插入内容
insertBefore() 反之
注意:移动节点时,首先是先从文档中删除元素,再将其插入到指定节点
6.复制节点
clone(true) 参数为true的话,将同时复制元素中所绑定的事件
7.替换节点
replaceWith() 将匹配内容替换成指定的HTML或者DOM元素
replaceAll() 指定的内容将全部替换......
注意:替换后原先绑定的事件将会与被替换的元素一起消失
8.包裹节点
wrapAll() 该方法将所有匹配到的元素用一个元素包裹
wrapInner() 该方法将每一匹配到的元素(包括它的文本节点)都单独用其他结构标记包裹起来
查:
直接使用jQuery的选择器查找
总结:
老实说原生js很恶心,一个个名字又臭又长,jquery是js的一个库,用来简化Dom操作的,因此jquery在dom操作上很多都和原生用法如出一辙,而且名字又短,所以今后两者使用的时候短而简的方法名就是jquery的方法。
JS基础---Dom的基本操作的更多相关文章
- JS基础-DOM
DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...
- 05 JS基础DOM
JS的window对象定时器: window下一些方法: <script> 弹出 window.alert('hello') 返回布尔值 var ret = window.confirm( ...
- JS基础DOM篇之二:DOM级别与节点层次?
通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别 在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...
- JS基础DOM篇之一:何为DOM?
近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...
- 2.3 js基础--DOM
一.javascript组成 ECMAScript:核心解释器[为我们提供好了最基本的功能:变量声明.函数.语法.运算]. 兼容性:完全兼容. DoM:文档对象 ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
随机推荐
- vue中组件通信之父子通信:props(组件传参)
实例一: <div id="app"> <alert msg="hhhhhhh"></alert> </div> ...
- 2、在VM上的 CentOS 6.5 上安装mysql
1.查看系统是否安装了MySQL 使用命令: #rpm -qa | grep mysql 2.卸载已安装的MySQL 卸载mysql命令如下: #rpm -e - ...
- SSM的理解
SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架.其中spring是一个轻量 ...
- P1258 小车问题
P1258 小车问题 蒟蒻精神自强不息蒟蒻精神永不言败加油加油ヾ(◍°∇°◍)ノ゙yeah yeah yeah 据说这是道小学奥数题抱歉蒟蒻的我没学过奥数,算了大概三大张演草纸,不得不说这题对于蒟蒻本 ...
- springmvc请求路径和请求参数的获取注解- @PathVariable和@RequestParam
@PathVariable和@RequestParam @PathVariable是从路径里面去获取变量,也就是把路径当做变量. @RequestParam是从请求里面获取参数. 如:url:http ...
- 【题解】Luogu P1533 可怜的狗狗
原题传送门 莫队介绍,Splay介绍 离线的题目,莫队是不错的解决方法 先把询问排一下序 剩下就套一个莫队的板子 每来一只狗就把漂亮值插入平衡树 每去掉一只狗就把漂亮值从平衡树中删掉 每次查询查平衡树 ...
- Ubuntu + CUDA9 + CUDNN7 + OpenCV3.4 + contrib +CAFFE-master
安装ubuntu时赞美Rufus(建议ubuntu16.04.04),过程参考 https://www.cnblogs.com/willnote/p/6725594.html 安 装 前 一 定 要 ...
- 【Python046--魔法方法:描述符】
一.描述符的定义: 描述符就是将特殊类型的类的实例指派给另外一个类的属性 1.举例: 特殊类型的类要实现以下三个方法中的其中一个或者全部实现 * __get__(self,instance,owner ...
- Loader
1.定义 可以把Loader当做一个占位符,即占有屏幕的某一个空间,当加载了组件之后,这个空间就能显示相应的图形了.所以可以给Loader设置anchor布局 2.加载组件 source:加载QML文 ...
- Yii使用笔记 2
yii中的 getId等函数, id更多的是一个 string, 而不是数字. CCaptchaAction > CAction > CComponent. 实现是 IAction. yi ...