JS复习—Dom脚本化文档

Posted 2020-07-03

Dom脚本化文档

一、选取文档元素

（1）用指定的id属性

var section1 = document.getElementsById(‘section1‘);

       注意：在低于IE8的浏览器中，getElementById()对匹配元素的Id不分大小写，也返回匹配name的元素。

（2）用指定的name属性

       定义：name属性只存在少数的html元素，包括表单、表单元素、<iFrame>和<img>元素

var radioButtons = document.getElementsByName("form_1");

       注意：为某些HTML元素设置name属性值将自动转换为Window对象中创建的属性，对Document对象也来类似。

 <form name = "form_1">
 var form_1 = document.form_1;

（3）通过标签名获取元素

  var lis = document.getElementsByTagName("li");

注意：

     Elements类中也定义getElementsByTagName()方法，其原理和Documents版本一样，但是它只选取调用该方法的后代元素

  <ul id="ul_1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
var ul = document.getElementById("ul_1");
var lis = ul.getElementsByTagName("li");

（4）通过css类选择元素

注意：

     Elements类中也定义getElementsByClassName ()方法，其原理和Documents版本一样，但是它只选取调用该方法的后代元素

 //  查找以"log"命名并且有"error"和"fatal"类的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("error fatal");

（5）通过CSS选择器选取元素 querySelectorAll()方法和querySelector()方法

  querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null.

  A在document类型调用

//取得body元素
var body = document.quetySelector("body");

  B、在Element类型调用

  会在该元素后代元素的范围内查找匹配的元素

  querySelectorAll()方法：接收一个CSS选择符，但是返回的事所有匹配的元素而不仅仅是一个元素。这个方法返回的事一个NodeList的实例

  调用类型：Document、DocumentFragment和Element

   例子：

//取得所有<p>元素中的所有<strong>元素
var strongs = document. querySelectorAll("p strong");

  matchesSelector()方法

  定义：这个方法接收一个参数，如果调用元素与该选择符匹配，返回true;否则返回false.

if （document.body.matchesSelector("body.page1")）{
  //true

}

二、文档结构和遍历

1、节点的类型

（1）节点访问属性

nodeType:表明节点类型

nodeName:节点名字

nodeValue:节点值

（2）节点的关系属性

子节点:

childNodes属性

firstchild属性

lastchild属性

父节点:

parentNode

同胞节点:

previousSibling属性

nextSibling属性

三、设置和获取属性的方法

1、获取元素对象的属性

（1）getAttribute()

（2）attributes属性，代表元素的所有属性。可以用数字索引访问，也可以用属性名索引

document.body.attributes[0];
document.body.attributes["onload"];
docuemnt.body.bgcolor

2、setAttribute()

3、hasAttribute()

4、remove Attribute()

注：数据集属性

      在HTML5文档中，任意以“data-”为前缀的小写属性名字都是合法的，HTML5还在Element对象上定义dataset属性，该属性指代一个对象，它的属性对应该去掉前缀data-属性。如dataset.x 应该保存data-x的值。待连字符的属性应用于驼峰命名法的属性名：data-jquery-test属性应该变成dataset.jqueryTest属性

三、元素节点的内容

1、innerHTML

2、textContent

3、innetText

四、创建、插入、删除节点

1、创建

（1）createElement()方法可以创建一个元素节点。

document.createElement(‘p‘); //创建一个元素节点

（2）createTextNode()方法创建一个文本节点。

var text = document.createTextNode(‘段落‘); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末

（3）cloneNode()方法可以把子节点复制出来。

var box = document.getElementById(‘box‘);
var clone = box.firstChild.cloneNode(true); //获取第一个子节点， true表示复制内容
box.appendChild(clone); //添加到子节点列表末尾

2、插入

（1）appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。

var box=document.getElementById(‘box‘); //获取某一个元素节点
var p=document.createElement(‘p‘); //创建一个新元素节点<p>
box.appendChild(p); //把新元素节点<p>添加子节点末尾

（2）insertBefore()方法可以把节点创建到指定节点的前面。

box.parentNode.insertBefore(p, box)

3、替换和删除

（1）repalceChild()方法

replaceChild()方法可以把节点替换成指定的节点。

box.parentNode.replaceChild(p,box); //把<div>换成了<p>

（2）removeChild()方法

removeChild()方法可以把

box.parentNode.removeChild(box); //删除指定节点

五、操纵样式

1、操作元素

（1）行内样式，操作style属性， 可读可写，style属性仅仅只能获取行内的CSS样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到

例子：

var box = document.getElementById(‘box‘); //获取box
box.style.cssFloat.style.fontSize;

（2）、行内、 内联和链接getComputedStyle或 currentStyle可读不可写

      window对象下提供了getComputedStyle()方法。 接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有没有伪类，就填null。PS： IE不支持这个DOM2级的方法，但有个类似的属性可以使用currentStyle属性。

varbox=document.getElementById(‘box‘);

varstyle=window.getComputedStyle?

window.getComputedStyle(box,null):null||box.currentStyle

（3）、内联和链接cssRules或 rules， 可读可写

var sheet = document.styleSheets[0] ;  //CSSStyleSheet

var rules  = sheet.cssRules|| sheet.rules; //CSSRuleList，样式表的规则集合列表

varrule = rules[0]; //CSSStyleRule，样式表第一个规则

2、脚本化CSS类

    因为class在javascript中是保留字，所以HTML属性class在JavaScript中应该使用className。className中能指定零个或一个类名，如果有多个类名 就无法工作了。

    e.className = "attention";

    e.className = "Null";

    HTML5解决了这个问题，为每个元素定义了classList属性：一个只读的类数组对象。定义了add()和remove()方法（添加和删除一个类名）。toggle()表示如果不存在类名就添加一个，否则删除它。contains()方法检测class属性中是否包含一个指定的类名。

六、专有扩展

1、文档模式

从 IE6开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。 IE为document对象添加了一个名为 compatMode属性，这个属性可以识别 IE浏览器的文档处于

什么模式如果是标准模式，则返回 CSS1Compat，如果是混杂模式则返回 BackCompat。

if (document.compatMode == ‘CSS1Compat‘) {

alert(document.documentElement.clientWidth);

} else {

alert(document.body.clientWidth);

}

2、children属性

由于子节点空白问题， IE和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用 children属性

var box = document.getElementById(‘box‘);

alert(box.children.length); //得到有效子节点数目

3、contains()方法

断一个节点是不是另一个节点的后代，我们可以使用 contains()方法。这个方法是 IE率先使用的，开发人员无须遍历即可获取此信息。

var box = document.getElementById(‘box‘);

alert(box.contains(box.firstChild)); //true

4、滚动

document.getElementById(‘box‘).scrollIntoView(); //设置指定可见