JavaScript学习--Item29 DOM基础详解

前端开发作者： 2024-08-25 19:55:02

看完JavaScript高级程序设计，整理了一下里面的DOM这一块的知识点，比较多，比较碎！DOM在整个页面的地位如图：DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描,绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分.1、节点层次DO

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true

insertBefore()——在参考节点前添加子节点,接收两个参数,第1个参数表示要添加的节点,第2个参数表示参考节点,返回添加的节点.

//插入后成为第1个子节点
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
alert(returnedNode == newNode); //true

replaceChild()——替换子节点,第2个参数表示被替换的节点,返回被替换的节点.

//替换第1个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

removeChild()—–移除子节点,这个方法接受1个参数，即要移除的节点。被移除的节点将成为方法的返回值

cloneNode()——克隆节点,接收1个boolean类型的参数,当参数为true时履行深复制,意即复制内容包括其子节点.

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他阅读器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

documentElement——获得html节点元素

var html = document.documentElement; //获得对<html>的援用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true

//获得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";

//获得完全的URL
var url = document.URL;
//获得域名
var domain = document.domain;
//获得来源页面的URL
var referrer = document.referrer;

var div = document.getElementById("myDiv"); //获得id='myDiv'元素的援用
var images = document.getElementsByTagName("img"); //获得img元素的援用
var allElements = document.getElementsByTagName("*"); //获得文档中所有的元素

var hasXmlDom = document.implementation.hasFeature("XML","1.0");

Core 1.0、2.0、3.0 基本的DOM，用于描写表现文档的节点树
XML 1.0、2.0、3.0 Core的XML扩大，添加了对CDATA、处理指令及实体的支持
HTML 1.0、2.0 XML的HTML扩大，添加了对HTML特有元素及实体的支持
Views 2.0 基于某些样式完成文档的格式化
StyleSheets 2.0 将样式表关联到文档
CSS 2.0 对层叠样式表1级的支持
CSS2 2.0 对层叠样式表2级的支持
Events 2.0，3.0 常规的DOM事件
UIEvents 2.0，3.0 用户界面事件
MouseEvents 2.0，3.0 由鼠标引发的事件（click、mouSEOver等）
MutationEvents 2.0，3.0 DOM树变化时引发的事件
HTMLEvents 2.0 HTML4.01事件
Range 2.0 用于操作DOM树中某个范围的对象和方法
Traversal 2.0 遍历DOM树的方法
LS 3.0 文件与DOM树之间的同步加载和保存
LS-Async 3.0 文件与DOM树之间的异步加载和保存
Validation 3.0 在确保有效的条件下修改DOM树的方法

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";

getAttribute()
setAttribute()
removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"

div.setAttribute("id","someOtherId");
div.setAttribute("class","ft");
div.setAttribute("title","Some other text");

div.removeAttribute("class");

getNamedItem(name)——返回nodeName 属性等于name 的节点；
removeNamedItem(name)——从列表中移除nodeName 属性等于name 的节点；
setNamedItem(node)——向列表中添加节点，以节点的nodeName 属性为索引；
item(pos)——返回位于数字pos 位置处的节点。

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";

document.createElement() ——方法可以创建新元素。这个方法只接受1个参数，即要创建元素的标签名。

var div = document.createElement('div');
div.id = 'myDiv';
div.className = 'box';

document.appendChild();

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");

var textNode = document.createTextNode("<strong>Hello</strong> world!");

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);

element.normalize();固然也能够分割文本节点,使用
splitText(index),index表示字符索引.

var newNode = element.firstChild.splitText(5);从位置5 开始。位置5是"Hello"和"world!"之间的空格
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2

//获得body 元素
var body = document.querySelector("body");
//获得ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//获得类为"selected"的第1个元素
var selected = document.querySelector(".selected");
//获得类为"button"的第1个图象元素
var img = document.body.querySelector("img.button");

//获得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//获得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//获得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

getElementsByClassName()方法

//获得所有类中包括"username"和"current"的元素，类名的前后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

焦点管理——document.activeElement

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
document.hasFocus()

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

readyState 属性

if(document.readyState == 'complete'){
    //履行操作
}

compatMode 的属性——document.compatMode属性告知开发人员阅读器采取了哪一种渲染模式。

if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
var div = document.getElementById("myDiv");
//获得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

if (div.dataset.myname){
alert("Hello," + div.dataset.myname);
}

- innerHTML属性

outerHTML 属性

scrollIntoView()方法——让元素可见

//让元素可见
document.forms[0].scrollIntoView();

DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。
DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图。
DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM文档交互。
DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS 样式信息。
DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和选择其特定部份的新接口。
DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML 基础上构建，添加了更多属性、方法和新接口
样式

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

var div = document.getElementById('myDiv');
console.log(div.style.color); //获得color值
div.style.color = 'red';    //设置color值
div.style.fontSize = '20px';//设置font-size的值(这里会将有短横线的值转化为驼峰命名来获得或设置)

cssText：通过它能够访问和设置style 特性中的CSS代码.支持IE6+,firfox.
length：利用给元素的CSS 属性的数量。支持IE9+,firfox.
parentRule：表示CSS 信息的CSSRule 对象,后面将讨论CSSRule 类型。
getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回”important”；否则，返回空字符串。支持IE9+,firfox.
getPropertyValue(propertyName)：返回给定属性的字符串值。支持IE9+、Safari,Chrome,firfox
item(index)：返回给定位置的CSS 属性的名称。支持IE9+、Safari,firfox
removeProperty(propertyName)：从样式中删除给定属性。支持IE9+、Safari,firfox
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（”important”或1个空字符串）。支持IE9+、Safari,firfox

//设置style对象的cssText属性
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets","2.0");

disabled：表示样式表是不是被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表。
href：如果样式表是通过<link>包括的，则是样式表的URL；否则，是null。
title：ownerNode 中title 属性的值。
type：表示样式表类型的字符串。对CSS 样式表而言，这个字符串是”type/css”。

cssRules：样式表中包括的样式规则的集合。IE 不支持这个属性，但有1个类似的rules 属性。
ownerRule：如果样式表是通过@import 导入的，这个属性就是1个指针，指向表示导入的规则；否则，值为null。IE 不支持这个属性。
deleteRule(index)：删除cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持1个类似removeRule()方法。
insertRule(rule,index)：向cssRules 集合中指定的位置插入rule 字符串。IE 不支持这个方法，但支持1个类似的addRule()方法。

偏移量
- offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平转动条的高度、上边框高度和下边框高度。
- offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直转动条的宽度、左侧框宽度和右侧框宽度。
- offsetLeft：元素的左外边框至包括元素的左内边框之间的像素距离。
- offsetTop：元素的上外边框至包括元素的上内边框之间的像素距离。

scrollHeight：在没有转动条的情况下，元素内容的总高度。
scrollLeft：被隐藏在内容区域左边的像素数。通过设置这个属性可以改变元素的转动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的转动位置。
肯定元素大小

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");