Javascript DOM2

e10101 发布于2019-08-22 17:20 / 1535人阅读

摘要：内部样式及外部样式的获取及修改内部样式或外部样式不能通过属性获取样式浏览器非标签节点，伪元素样式名只读属性标签节点，伪元素样式名兼容写法伪元素伪元素只能应用于块级元素首个字符样式首行样式在元素后面添加新的内容样式在元素前面添加新的内容样

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

内部样式或外部样式不能通过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



var p1 = document.getElementById("p1");
var text1 = window.getComputedStyle(p1, "after").content;
console.log(text1);    //"where are you from"

2. 小练习：div的移动

div

3. 节点常用属性

注：文档节点 #document 9 null

4. 父子节点的关系

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 属性节点
 
 // 元素（标签）可以认为是节点， 节点不一定是元素

5.练习：小球碰撞问题

两球问题

6. 动态操作节点

方法	说明
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 DOM3

GPU云服务器云服务器 dom0和dom2 javascript javascript: javascript??

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95085.html

#javascript# DOM2

摘要：当元素的某一个行为被触发，浏览器会把当前存放在事件池中的所有方法，依次按照存放的先后顺序执行。浏览器会把一些常用的事件挂载到元素对象的私有属性上。 DOM2事件绑定的原理1.DOM2事件绑定使用的addEventListener/attachEvent都是在EventTarget这个内置类的原型上定义的，我们使用的时候，会通过原型链找个这个方法，然后执行绑定的事件。2.浏览器会给当前元...

BLUE 2019-08-26 13:50 评论0 收藏0
JavaScript DOM2和DOM3——“DOM的变化”的注意要点

摘要：和级分为许多模块，分别描述了的某个非常具体的子集。这些模块主要有核心视图事件样式遍历和范围以及。另外还有方法和方法框架的变化框架和内嵌框架分别用和表示，它们在级中都有一个新属性这个属性包含一个指针，指向表示框架内容的文档对象。 DOM2和DOM3级分为许多模块，分别描述了DOM的某个非常具体的子集。这些模块主要有核心（Core）、视图（Views）、事件（Events）、样式（Styl...

骞讳护 2019-08-19 17:14 评论0 收藏0
JavaScript 简介

摘要：简介原文链接简称是一种轻量级，解释型的编程语言，其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构，以便简化对文档的任意部分的访问和操作。 JavaScript 简介原文链接 JavaScript ( 简称：JS ) 是一种轻量级，解释型的编程语言，其函数是一等公民。众所周知，它是用于网页开发的脚...

URLOS 2019-08-20 10:33 评论0 收藏0
# Javascript # DOM2兼容处理

摘要：兼容问题，除了语法上的区别，在处理的机制上也有下列问题顺序问题，重复问题，对象问题。没有进行去重处理。在标准浏览器中在低版本中究其根本，都是低版本浏览器对于它内置事件池处理机制的不完善导致的。 DOM2兼容问题，除了语法上的区别，在处理的机制上也有下列问题：顺序问题，重复问题，this对象问题。语法问题 [标准]curEle.addEventListener(type, fn, fa...

fnngj 2019-08-23 18:01 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0