JavaScript DOMの操作形式とスタイル_基礎知識

1 操作フォーム

f5d188ed2c074f8b944552db028f98a1 タグは HTML の中で最も複雑な構造であり、DOM を通じて作成および生成したり、

を通じて操作したりできます。

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);

// テーブルは複雑で多くのレベルがあります。特定の要素を取得するために以前の DOM を使用するのは面倒です。
を使用することをお勧めします。 HTMLDOM のプロパティとメソッドの概要
プロパティまたはメソッド 説明
caption は
要素への参照を保持します。 tBodies は 92cee25da80fac49f6fb6eec5fd2c22a 要素の HTMLCollection を保持します。 tFoot は
要素への参照を保持します。 tHead は
要素への参照を保持します。 rows は a34de1251f0d9fe1e645927f19a896e8 要素の HTMLCollection を保持します。 createTHead() は ae20bdd317918ca68efdc799512a9b39 要素を作成し、
を返します。 createTFoot() は 06669983c3badb677f993a8c29d18845 要素を作成し、
を返します。 createCpation() は 63bd76834ec05ac1f4c0ebbeaafb0994 要素を作成し、
を返します。 deleteTHead() は ae20bdd317918ca68efdc799512a9b39 要素を削除します;
deleteTFoot() は
要素を削除します。 deleteCaption() は 63bd76834ec05ac1f4c0ebbeaafb0994 要素を削除します。
deleteRow(pos) は指定された行を削除します;
insertRow(pos) は、行コレクション
の指定された位置に行を挿入します。

要素によって追加された属性とメソッド rows は、92cee25da80fac49f6fb6eec5fd2c22a

内の行の HTMLCollection を保持します。 deleteRow(pos) は、指定された位置の行を削除します;
insertRow(pos) は、行コレクション
の指定された位置に行を挿入します。
a34de1251f0d9fe1e645927f19a896e8要素に追加された属性とメソッド

cell は、a34de1251f0d9fe1e645927f19a896e8 要素内のセルの HTMLCollection コレクションを保持します。 deleteCell(pos) は、指定された位置のセルを削除します;

insertCell(pos) は、セル コレクションの指定された位置にセルを挿入し、参照を返します。
//HTMLDOM はテーブルの 63bd76834ec05ac1f4c0ebbeaafb0994
を取得します alert(table.caption.innerHTML); // キャプションの内容を取得します;

// PS: と はテーブル内で 1 つだけ存在します。 // そして、92cee25da80fac49f6fb6eec5fd2c22a は複数である可能性があるため、最終的に返される ae20bdd317918ca68efdc799512a9b39 は要素のコレクションになります。

2 操作スタイル

CSS は (X)HTML の補助としてページの表示効果を高めることができますが、すべてのブラウザーが最新の CSS 機能をサポートできるわけではありません。 CSS 機能は DOM レベルと密接に関係しているため、現在のブラウザーでサポートされている CSS 機能のレベルを検出する必要があります。

HTML でスタイルを定義するには 3 つの方法があります:

(1) style 属性を使用して、特定の要素のスタイルを定義します。 (2) e5323b80b7cdba5fa628a1c89784fa75 要素を使用して、埋め込みスタイルを定義します。 (3). c88766e8e98f17593dff2d30c01c03cf 1 // DOM1 レベルは最も基本的なドキュメント処理を実装し、DOM2 と DOM3 はこれに基づいてさらに対話的な機能を追加します。 DOM2 は、CSS プログラミング アクセス メソッドと CSS スタイル情報の変更を追加します。 ブラウザが DOM1 レベルの CSS 機能をサポートしているか、DOM2 レベルの CSS 機能をサポートしているかを検出します alert('DOM1 レベルの CSS 機能:' document.implementation.hasFeature('CSS','2.0'));

alert('DOM2 レベルの CSS 機能:' document.implementation.hasFeature('CSS2','2.0'));

1. 要素のスタイルにアクセスします



(1).style プロパティ/オブジェクト
// HTML 要素タグには共通の属性 style があり、CSSStyleDeclaration オブジェクト
を返します。 CSS プロパティと JavaScript 呼び出し
CSS プロパティ JavaScript 呼び出し

カラー style.color

フォントサイズ style.fontSize float style.cssFloat (IE 以外)
float style.styleFloat(IE) var box = document.getElementById('box');

box.style; // CSSStyleDecaration;

ボックス.スタイル.カラー; box.style.fontSze // 20px;
// IE の float 演算と互換性があります;
box.style.cssFloat の種類 != '未定義' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

    DOM2级样式规范为style对象定义属性和方法
属性或方法                       说明
cssText                 访问或设置style中的CSS代码;
    box.style.cssText;                      // 获取CSS代码;
    // PS:style属性仅仅只能获取行内的CSS样式,对于另外两种形式内联c9ccee2e6ea535a969eb3f532ad9fe89和链接2cdf5bf648cf2f33323966d7f58a7f3f方法则无法获取到;

(2).计算后的样式:getComputedStyle/currentStyle
// 虽然可以通过style来获取单一值的CSS样式,但对于复合值的样式信息,就需要通过计算样式来获取;
// DOM2级样式,window对象下提供了getComputedStyle()方法:接收两个参数,需要计算的样式元素,和伪类(:hover);如果没有伪类,则null;
// getComputedStyle()方法返回一个CSSStyleDeclaration对象;(与style属性的类型相同);其中包含当前元素的所有计算的样式;
// PS:IE不支持这个DOM2级的方法,但有个类似的属性可以使用currentStyle属性;
var box = document.getElementById('box');
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null ||box.currentStyle;
alert(style.color); // 颜色在不同的浏览器会有不同rgb()格式;
alert(style.border); // 不同浏览器不同的结果;
alert(sytle.fontFamily); // 计算显示复合的样式值;
// PS:border属性是一个综合属性,所以它在Chrome显示了,Firefox为空,IE为undefined;
// 所以,DOM在获取CSS的时候,最好采用完整写法兼容性最好;比如:border-top-color;

2.操作样式表

// 使用style属性可以设置行内的CSS样式,而通过id和class调用是最常用的方法;
  box.className = 'red';         // 通过className关键字来设置样式;
// 添加多个className函数:
  // 判断是否存在这个class;
  function hasClass(element,className){
    return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
  }
  // 添加一个class,如果不存在的话;
  function addClass(element,className){
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  }
  // 删除一个class,如果存在的话;
  function removeClass(element,className){
    if(hasClass(element,className)){
      element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
    }
  }
// 之前使用style属性,仅仅只能获取和设置行内的样式;
// 然后学习的getComputedStyle和currentStyle,只能获取却不能设置;

(1).获得CSSStyleSheet
// CSSStyleSheet类型可以通过2cdf5bf648cf2f33323966d7f58a7f3f元素和c9ccee2e6ea535a969eb3f532ad9fe89元素包含的样式表;
document.implementation.hasFeature('StyleSheet','2.0'); // 是否支持DOM2级样式表;
document.getElementsByTagName('link')[0]; // HTMLLinkElement;
document.getElementsByTagName('style')[0]; // HTMLStyleElement;
// 这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型;但CSSStyleSheet类型更加通用一些;
// 得到这个类型非IE使用sheet属性,IE使用styleSheet;
var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet; // 得到CSSStyleSheet;

(2).CSSStyleSheet对象的属性和方法
CSSStyleSheet属性或方法
属性或方法 说明
disabled 获取和设置样式表是否被禁用;
href 如果是通过2cdf5bf648cf2f33323966d7f58a7f3f包含的,则样式表为URL,否则为null;
media 样式表支持的所有媒体类型的集合;
ownerNode 指向拥有当前样式表的指针;
parentStyleSheet @import导入的情况下,得到父CSS对象;
title ownerNode中title属性的值;
type 样式表类型字符串;
cssRules 样式表包含样式规则的集合,IE不支持; IE为rules;12 ownerRule @import导入的情况下,指向表示导入的规则,IE不支持;
deleteRule(index) 删除cssRules集合中指定位置的规则,IE不支持;
insertRule(rule,index) 向cssRules集合中指定位置插入rule字符串,IE不支持;

sheet.disabled; // false; 可设置为true;
sheet.href; // css的URL;
sheet.media; // MediaList,集合;
sheet.title; // 得到title属性的值;
sheet.cssRules; // CSSRuleList,样式表规则集合;
sheet.deleteRule(0); // 删除第一个样式规则;
sheet.insertRule("body {background-color:red}",0); // 在第一个位置添加一个样式规则;

// PS:IE中不支持的属性和方法,IE有替代版本;
sheet.rules; // 代替cssRules的IE版本;
sheet.removeRule(0); // 代替deleteRule的IE版本;
sheet.addRule("body","{background-color:red",0); // 代替insertRule的IE版本;

// 除了刚才的方法可以得到CSSStyleSheet类型,还有一种方法是通过document的styleSheets属性来获取;
document.styleSheets; // StyleSheetList,集合;
var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一个样式表对象;

// 添加CSS规则,并兼容所有浏览器函数;
  var sheet = docuemnt.styleSheets[0];
  insertRule(sheet,"body","background-color:red;",0);
  function insertRule(sheet,selectorText,cssText,postion){
    // 如果是非IE;
    if(sheet.insertRule){
      sheet.insertRule(selectorText+"{"+cssText+"}",postion);
    // 如果是IE
    }else if(sheet.addRule){
      sheet.addRule(selectorText,cssText,postion);
    }
  }

(3).CSSRules スタイル シート ルール コレクション リスト;
// CSSRules 属性 (非 IE) と rules 属性 (IE) を通じて、スタイル シートのルール コレクション リストを取得できます。 // このようにして、各スタイルに対して特定の操作を実行できます;
varsheet = docuemnt.styleSheets[0] // CSSStyleSheet;
; var rules =sheet.cssRules || CSSRuleList、スタイルシートのコレクションリスト; var rules = rules[0] // CSSStyleRule、スタイルシートの最初のルール; CSSRules
のプロパティ プロパティの説明
cssText は現在の全体的なルールに対応するテキストを取得します。IE はそれをサポートしていません。
parentRule @import がインポートされ、ルールまたは null が返されます。IE はサポートしていません。
parentStyleSheet 現在のルールのスタイル シート。IE はサポートしていません。
selectorText は、現在のルールのセレクター テキストを取得します;
style はスタイルを取得および設定できる CSSStyleDeclaration オブジェクトを返します。 type はルールの定数値を表します。スタイル ルールの場合、値は 1 です。これは IE ではサポートされていません。
rules.cssText; // 現在のルールのテキストをスタイルします;
ルール.セレクターテキスト; // #ボックス; rules.style.color; // 特定のスタイル値を取得します。 rules.style.backgroundColor = "green" // 特定のルールのスタイル情報を変更します;
;

3 概要


DOM2 レベルのスタイルモジュールは、主に要素のスタイル情報を操作するために開発されています。
(1) 各要素には、インライン スタイルを決定および変更するために使用できる、関連付けられたスタイル オブジェクトがあります。 (2) 要素の計算されたスタイル (それに適用されるすべての CSS ルールを含む) を決定するには、 getComputedStyle() メソッドを使用できます。 (3).IE は同様のメソッド currentStyle();

をサポートします。 (4). スタイル シートには document.styleSheets コレクションを通じてアクセスできます 6 // (5). CSS を操作する 3 つの方法:

最初のスタイルはインラインで、読み取りおよび書き込みが可能です。

2 番目のタイプのインライン/インラインとリンクは、読み取り可能ですが書き込み可能ではない getComputedStyle または currentStyle を使用します。 3 番目のタイプのインライン化と接続では、読み取りと書き込みが可能な cssRules またはルールを使用します。