JavaScript-DOM（2）

内部样式及外部样式的获取及修改

内部样式或外部样式不能通过style属性获取样式

IE浏览器：var width = div1.currentStyle.width;

非IE：window.getComputedStyle(标签节点，伪元素).样式名

只读属性！！！

window.getComputedStyle(标签节点，伪元素)['样式名']

var height = window.getComputedStyle(div1, null).height;

// 兼容写法

if(div1.currentStyle){

    var width = div1.currentStyle.width;

    console.log(width);

}else{

    var height = window.getComputedStyle(div1, null).height;

    console.log(height);

}

伪元素：伪元素只能应用于块级元素

:first-letter：首个字符

样式： color、background、border、float、margin、padding

:first-line：首行

样式： color、background、border、float、margin、padding

:after：在元素后面添加新的内容

样式：content

:before：在元素前面添加新的内容

样式：content

<style type="text/css">

#p1:after{

            content:'where are you from'

        }

</style>

var p1 = document.getElementById("p1");

var text1 = window.getComputedStyle(p1, 'after').content;

console.log(text1);    //'where are you from'

小练习：div的移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div</title>

    <style type="text/css">

        #box{

            width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <button onclick="start()" style="position: absolute;left: 150px;top: 150px">开始</button>

    <button onclick="pause()" style="position: absolute;left: 200px;top: 150px">暂停</button>

    <script type="text/javascript">

        function start() {

            var div = document.getElementById("box");

            // 设置一个定时器，每隔0.1秒执行一次move函数

            timer = window.setInterval(move, 100);

            function move() {

                // 获得div的left属性，并取得整数

                var currentLeft = parseInt(window.getComputedStyle(div, null).left);

                // 更新left属性的值

                div.style.left = (currentLeft + 5) + "px";

                var currentTop = parseInt(window.getComputedStyle(div, null).top);

                div.style.top = (currentTop + 5) + "px";

            }

        }

        function pause () {

            // 清除定时器

            window.clearInterval(timer);

        }

    </script>

</body>

</html>

节点常用属性

父子节点的关系

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

// 1、获取当前节点下的所有子节点

var childNodeArr = div1.childNodes;

// [text, div#div2, text, div#div3, text, div#div4, text]

console.log(childNodeArr);

// 2、获取当前节点下的第一个子节点

var firstNode = div1.firstChild;

console.log(firstNode);   // 'div1    '

console.log(typeof firstNode);  // object

// 文本节点属性

console.log(firstNode.nodeName);  //#text

console.log(firstNode.nodeType);  //3

console.log(firstNode.nodeValue);  // 'div1    '

 // 3、获取当前节点下的最后一个子节点

 var lastNode = div1.lastChild;

 // 4、获取当前节点的父节点

 var parentNode = div1.parentNode;

 console.log(parentNode);  // body

 // 5、获取根节点

 var doc = div1.ownerDocument;

 console.log(doc);

 // 6、获取兄弟节点

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

 // 6.1、获取当前节点的上一同级节点

 var pre1 = div4.previousSibling;

 // 6.2、获取当前节点的上一个同级元素节点

 var pre2 = div4.previousElementSibling;

 // 6.3、获取当前节点的下一同级节点

 var ne1 = div4.nextSibling;

 // 6.4、获取当前节点的下一个同级元素节点

 var ne2 = div4.nextElementSibling;

 // 7、获取当前节点下所有属性节点

 var attArr = div4.attributes;

 console.log(attArr);

 console.log(attArr[0].nodeName);   //获取属性的名字  id

 console.log(attArr[0].nodeValue);   //获取属性的值  div4

 console.log(attArr[0].nodeType);   // 2 属性节点

 // 元素（标签）可以认为是节点， 节点不一定是元素

动态操作节点

方法	说明
createElement(tagName)	创建元素节点
父节点.appendChild(新元素节点)	将元素节点添加到父节点上
insertBefore(新的元素节点，参照物节点)	将元素添加到节点之前
div2.id = 'div2'	动态添加属性
createTextNode (Text)	创建文本节点
cloneNode()	只复制当前节点
cloneNode(true)	复制当前节点及其子节点默认false
replaceChild(新的节点，旧的节点)	替换节点
removeChild(Element)	删除元素

// 1、创建元素节点

var div1 = document.createElement('div');

// 设置innerHTML

div1.innerHTML = '我才来了';

//1.1、将元素节点添加到父节点上

// 父节点.appendChild(新元素节点)

// document.body 获取body节点

document.body.appendChild(div1);

// 1.2、将元素添加到节点之前

// 将新的标签节点放到参照物之前

var div2 = document.createElement("div");

div2.innerHTML = '明天注意防晒';

var h = document.getElementById("h2");

document.body.insertBefore(div2, h);

// 2、动态添加属性

// 例子：添加id属性

div2.id = 'div2';

// 3、创建文本节点

// 一个对象只能放到一个位置上

var text1 = document.createTextNode("还不来");

var d = document.getElementById("div1");

// d.appendChild(text1);

// 添加到父节点上

document.body.appendChild(text1);

// 4、复制节点

// 4.1 cloneNode()

var div3 = document.getElementById("div3");

var divC1 = div3.cloneNode();

console.log(divC1);

// 4.2 cloneNode(true) 复制当前节点及其子节点 默认false

var divC2 = div3.cloneNode(true);

console.log(divC1);

// 5、替换节点

// replaceChild(新的节点，旧的节点)

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

var div5 = document.createElement('div');

div5.innerHTML = '看完就走了'

document.body.replaceChild(div5,h1)

// 6、 删除元素

document.body.removeChild(div5);

JavaScript-DOM（2）的更多相关文章

8.6 JavaScript之HTML的DOM（三）
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档是一个节点 ...
深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑才华横溢的 ...
javaScript事件（二）事件处理程序
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
javaScript事件（四）event的公共成员（属性和方法）
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序四.IE事件处理程序以上内容见javaScript事件(二)事件处理程序五.事件对象以上内容见javaS ...
javaScript事件（三）事件对象
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序四.IE事件处理程序以上内容见javaScript事件(二)事件处理程序五.事件对象 1.认识事件对象事 ...
DOM（二）使用DOM
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3scho ...
第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
javaScript事件（九）事件类型之触摸与手势事件
一.触摸事件 touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续地触发.在这个世界发生期间,调用preventDefau ...
javaScript事件（八）事件类型之变动事件
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...

随机推荐

Apache hardoop 的基础知识学习总结
hardoop的主要构成: (1)HDFS 分布式文件系统,解决海量数据存储 (2) YARN 解决资源任务调度(包括作业调度和集群资源调度) (3)MapReduce 解决海量数据计算集群搭建的步 ...
剑指offer——python【第31题】整数1出现的次数
题目描述求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...
补充：MySQL经典45道题型
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表 ...
JAVA SE ------------------- 项目的菜单输入
//写一个工具类,进行输入选项数值的获取public class InputUtil { static Scanner sc=new Scanner(System.in); public static ...
python语法_变量及命名规则
变量:存储信息的,日后被调用,修改操作常量:固定不变的量,字母大写变量命名规则: 1 有字母,数字以及下划线等符号组成 2 区分大小写 3 不能使用数字开头,不能含有特殊字符和空格 4 不能使用 ...
python全栈开发 * 36知识点汇总 * 180721
36 操作系统的发展史进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制台开关启动程序针对 ...
ELK之使用filebeat收集系统数据及其他程序并生成可视化图表
当您要面对成百上千.甚至成千上万的服务器.虚拟机和容器生成的日志时,请告别 SSH 吧.Filebeat 将为您提供一种轻量型方法,用于转发和汇总日志与文件,让简单的事情不再繁杂. 1,安装fileb ...
PAT甲级1143 Lowest Common Ancestor【BST】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805343727501312 题意: 给定一个二叉搜索树,以及他的前 ...
ES6 数组方法拓展
ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...
Linux-003-Resource temporarily unavailable
Jenkins构建任务向服务器发送war包时提示信息如下所示: 由上述信息可知通过SSH命令连接失败.通过Client连接服务器,提示信息如下: 提示信息说明资源暂时不可用. 原因一般是因为用户或应用 ...