HTML和DOM关系,HTML DOM元素关系与操作

DOM元素关系与操作

水平居中

水平垂直居中

DOM关系判断

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

//1.判断是否为包含关系

div1.contains(div2);

//2.如果 parentNode 为包含者,则为父子关系

div2.parentNode == div1

//3. 兄弟关系

div1.nextElementSibling == div2

DOM元素操作

查找节点

//根据id 查找

var div1 = document.getElementById('div1');

//根据tab查找

var divs = document.getElementsByTagName('div');

//根据name属性值查找

var divs = document.getElementsByName('div');

//根据class属性查找

var divs = document.getElementsByClassName("content")

创建&&添加&&移动

//创建一个元素并设置属性

var newE = document.createElement('ss');

newE.id = newE;

newE.name = new;

newE.innerHTML ="Hello";

//appendChild 只能添加已经有的元素 ,会改变已有的元素的位置

div1.appendChild(newE);

//append可以添加没有的元素

div1.append("

直接创建并添加

");

//将div3移动到div1内的div2之前 即div1必须包含div2 将其他元素移到到div2之前

div1.insertBefore(div3,div2)

移除

div1.remove(div2);

替换元素

//将div3替换div1内的div2 即div1必须包含div2 将其他元素替换div2

div1.replaceChild(div3,div2)

复制

//深复制

var deepList = div1.cloneNode(true);

//浅复制

var shallowList = div1.cloneNode(false);

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

JavaScript HTML DOM元素节点常用操作接口

在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

vue(4)—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

vue 使用ref获取DOM元素和组件引用

在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分:

DOM的查找与操作

jacascript DOM节点——节点关系与操作

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...

jQuery操作DOM元素

作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

【面试必备】javascript操作DOM元素

前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

Jquery cxColor 示例演示

今天第一次自己做调色板调用,看了半天官方的例子愣是没看懂,唉,码农老矣,尚能码否? 经过对官方下载的示例一删一浏览终于弄出来了,这么简单的东西,官方的Demo逼格也太高了 上代码:

第 18 章 CSS 表格与列表

学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

php 连接mongodb 增查改删操作

查询 <?php $m=new MongoClient('mongodb://admin:admin@localhost:27017/admin'); $db=$m->hndb; $cc= ...

Python LDAP中的时间戳转换为Linux下时间

(Get-ADUser zhangsan -Properties badpasswordtime).badpasswordtime返回值为:131172610187388712131172610187 ...

CDN技术分享

CDN技术分享目录 网络应用服务发展 CDN技术 1.CDN是什么?为什么我们需要它?(简介) 2.CDN能做什么?(作用) 3.CDN是如何工作?(原理) 4.CDN有那些具体应用?(应用) 我们项 ...

Hadoop入门进阶课程8--Hive介绍和安装部署

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

MVC清除缓存设置&plus;数据验证

[OutputCache(Location = OutputCacheLocation.None, NoStore = true)] [Table("User")]:定义UserD ...

Memcached学习&lpar;二&rpar;

4.协议简介 Memcached服务与各客户端间通过Tcp链接通讯(也可通过Udp链接). 各客户端间与服务间不需要发送特别的命令关闭链接,只要在不需要的时候直接关闭链接即可.建议客户端与服务间保持长 ...

&dollar;&period;each 和&dollar;&lpar;selector&rpar;&period;each&lpar;&rpar;的差别

Home » jQuery » $.each() $.each() Posted on 2012 年 3 月 15 日 in jQuery, jQuery函数 | by Jason | 译自官方手冊: ...

How Many Fibs&quest;

How Many Fibs? 点我 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...