JavaScript DOM 연산 형태와 스타일_기본지식

1가지 운영형태

f5d188ed2c074f8b944552db028f98a1 태그는 HTML에서 가장 복잡한 구조입니다. DOM을 통해 생성하고 HTMLDOM을 통해 작동할 수 있습니다.

// 使用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을 사용하는 것이 좋습니다. HTMLDOM 속성 및 메서드 소개
속성 또는 메서드 설명
caption에는
요소에 대한 참조가 있습니다. tBodies는 92cee25da80fac49f6fb6eec5fd2c22a 요소의 HTMLCollection을 보유합니다.
tFoot는
요소에 대한 참조를 보유합니다. tHead는
요소에 대한 참조를 보유합니다. 행에는 a34de1251f0d9fe1e645927f19a896e8 요소의 HTMLCollection이 있습니다.
createTHead()는 ae20bdd317918ca68efdc799512a9b39 참조를 반환합니다. createTFoot()는 06669983c3badb677f993a8c29d18845 요소를 생성하고 참조
를 반환합니다. createCpation()은 63bd76834ec05ac1f4c0ebbeaafb0994 요소를 생성하고 참조
를 반환합니다. deleteTHead()는 ae20bdd317918ca68efdc799512a9b39 요소를 삭제합니다.
deleteTFoot()는
요소를 삭제합니다. deleteCaption()은 63bd76834ec05ac1f4c0ebbeaafb0994 요소를 삭제합니다.
deleteRow(pos)는 지정된 행을 삭제합니다.
insertRow(pos)는 행 컬렉션의 지정된 위치에 행을 삽입합니다.

92cee25da80fac49f6fb6eec5fd2c22a 요소에 추가된 속성 및 메소드

행은 92cee25da80fac49f6fb6eec5fd2c22a 요소의 HTMLCollection을 보유합니다.

deleteRow(pos)는 지정된 위치의 행을 삭제합니다.
insertRow(pos)는 행 컬렉션의 지정된 위치에 행을 삽입합니다.

a34de1251f0d9fe1e645927f19a896e8요소에 추가된 속성 및 메소드

셀은 a34de1251f0d9fe1e645927f19a896e8 요소에 있는 셀의 HTMLCollection 컬렉션을 보유합니다.

deleteCell(pos)는 지정된 위치의 셀을 삭제합니다.
insertCell(pos)은 셀 컬렉션의 지정된 위치에 셀을 삽입하고 참조를 반환합니다.

//HTMLDOM은 테이블의 63bd76834ec05ac1f4c0ebbeaafb0994

을 가져옵니다. Alert(table.caption.innerHTML); // 캡션 내용을 가져옵니다.

// 추신: ae20bdd317918ca68efdc799512a9b39 및 06669983c3badb677f993a8c29d18845는 테이블에 하나만 있을 수 있습니다. // 그리고 92cee25da80fac49f6fb6eec5fd2c22a는 고유하지 않으며 여러 개가 될 수 있습니다. 따라서 최종적으로 반환된 06669983c3badb677f993a8c29d18845는 요소의 컬렉션입니다.

2가지 작전 스타일

CSS는 (X)HTML의 보조 기능으로 페이지 표시 효과를 향상시킬 수 있지만 모든 브라우저가 최신 CSS 기능을 지원할 수 있는 것은 아닙니다. CSS 기능은 DOM 수준과 밀접한 관련이 있으므로 현재 브라우저에서 지원하는 CSS 기능 수준을 감지해야 합니다. HTML에서 스타일을 정의하는 방법에는 세 가지가 있습니다.

(1) 특정 요소의 스타일을 정의하려면 스타일 속성을 사용하세요. (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 호출
색상 스타일.색상 글꼴 크기 스타일.fontSize

float style.cssFloat(IE 아님)

float style.styleFloat(IE)
var box = document.getElementById('box');
box.style; // CSSStyleDecaration;
상자.스타일.색상; box.style.fontSze; // 20px;
// IE의 부동 소수점 연산과 호환됩니다.
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 아님) 및 규칙 속성(IE)을 통해 스타일 시트의 규칙 컬렉션 목록을 얻을 수 있습니다.
// 이 방법으로 각 스타일에 대해 특정 작업을 수행할 수 있습니다.
var sheet = docuemnt.styleSheets[0] // CSSStyleSheet;
var rule = sheet.cssRules || sheet.rules; // CSSRuleList, 스타일 시트 규칙 모음
var rule = rule[0]; // CSSStyleRule, 스타일시트의 첫 번째 규칙
CSSRules의 속성
부동산 설명
cssText는 현재 전체 규칙에 해당하는 텍스트를 가져오지만 IE는 이를 지원하지 않습니다.
parentRule @import 가져오기, 규칙 또는 null 반환, IE는 이를 지원하지 않습니다.
parentStyleSheet 현재 규칙의 스타일 시트, IE는 이를 지원하지 않습니다.
selectorText는 현재 규칙의 선택기 텍스트를 가져옵니다.
스타일은 스타일을 가져오고 설정할 수 있는 CSSStyleDeclaration 객체를 반환합니다.
type은 규칙의 상수 값을 나타냅니다. 스타일 규칙의 경우 값은 1이며 이는 IE에서 지원되지 않습니다.

rule.cssText; // 현재 규칙의 스타일 텍스트;
rule.selectorText; // #박스 스타일 선택기
rule.style.color; // 빨간색; 특정 스타일 값을 가져옵니다. rule.style.BackgroundColor = "green"; // 특정 규칙의 스타일 정보를 수정합니다.

3개 요약

DOM2 레벨 스타일 모듈은 주로 요소의 스타일 정보를 조작하기 위해 개발되었으며 그 특징은 다음과 같습니다.

(1) 각 요소에는 인라인 스타일을 결정하고 수정하는 데 사용할 수 있는 관련 스타일 개체가 있습니다. (2) 요소의 계산된 스타일(적용된 모든 CSS 규칙 포함)을 결정하려면 getCompulatedStyle() 메서드를 사용할 수 있습니다. (3).IE는 유사한 메서드 currentStyle()을 지원합니다.
(4) 스타일 시트는 document.styleSheets 컬렉션을 통해 액세스할 수 있습니다. 6 // (5) 스타일 시트 규칙 컬렉션 목록 CSSRules 1 // CSS를 작동하는 세 가지 방법;

첫 번째 스타일은 인라인이며 읽기 및 쓰기가 가능합니다.
두 번째 유형의 인라인/인라인 및 링크는 읽을 수는 있지만 쓸 수는 없는 getCompulatedStyle 또는 currentStyle을 사용합니다.

세 번째 유형의 인라인 및 연결은 읽기 및 쓰기가 가능한 cssRules 또는 규칙을 사용합니다.