进阶8.DOM

作者: LouisJ | 来源:发表于2018-03-06 15:12 被阅读0次

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。

DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。

image

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的

document 对象

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

document对象常用属性

document对象有很多属性来描述文档信息，介绍几个常用的

    document.doctype
    document.title
    document.characterSet
    document.head
    document.body //例如，我们想往body中加一些新的属性，就可以这样调用
    document.images

    /*了解
    readyState属性返回当前文档的状态，共有三种可能的值

    1\. loading：加载HTML代码阶段，尚未完成解析
    2\. interactive：加载外部资源阶段
    3\. complete：全部加载完成
    */
    document.readyState

    /*了解
    compatMode 属性返回浏览器处理文档的模式，可能的值为
    1\. BackCompat：向后兼容模式，也就是没有添加DOCTYPE
    2\. CSS1Compat：严格模式，添加了DOCTYPE
    */
    document.compatMode

document.location

document.location 也可直接使用 location

document.location === location //true
document.location === window.location  //true

location属性返回一个只读对象，提供了当前文档的URL信息

// 假定当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1" #号后面的值就是哈希
document.location.user // "user"
document.location.password // "passed"

// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)
// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串，等价于document.location.href
document.location.toString()

虽然location属性返回的对象是只读的，但是可以将URL赋值给这个属性，网页就会自动跳转到指定网址。

document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';

image.png

document.open()、document.close()

document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容

document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。

document.write()

document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。

document.open();
document.write("hello");
document.write("world");
document.close();

如果页面已经渲染完成再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
如果在页面渲染过程中调用write方法，并不会调用open方法。

需要注意的是，虽然调用close方法之后，无法再用write方法写入内容，但这时当前页面的其他DOM节点还是会继续加载。

除了某些特殊情况，应该尽量避免使用document.write这个方法。

Element

除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作

Element有几个重要属性

nodeName：元素标签名，还有个类似的tagName
nodeType：元素类型
className：类名
id：元素id
children：子元素列表（HTMLCollection）
childNodes：子元素列表（NodeList）
firstChild：第一个子元素
lastChild：最后一个子元素
nextSibling：下一个兄弟元素
previousSibling：上一个兄弟元素
parentNode、parentElement：父元素

查询元素

getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

var elem = document.getElementById("test");

image.png

说明：我们要对一个元素进行css样式的添加，或者添加一个属性，首先应该选中它

进一步选中元素

image.png

getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var elements = document.getElementsByClassName('tab');

getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。

image.png

getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法无法选中CSS伪元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代码返回class属性是note或alert的div元素。

querySelector与querySelectorAll的区别

区别

兼容性

创建元素

createElement()

使用场景举例
1.例如，我点击了一个按钮，然后选择了h1这个节点，在其中添加图片
2.又比如，我在head中添加一个script，然后添加一个src，添加一个jquery
createElement方法用来生成HTML元素节点。

var newDiv = document.createElement("div");

createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

createTextNode()

createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代码新建一个div节点和一个文本节点

createDocumentFragment()

createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

说明：当我们使用createElement来创建元素的时候，例如，现在有一个数组，里面有100个元素，通过遍历将这些元素变成对象，然后将这100个对象插入到某个div中，那么这时会对页面进行100次重绘，但如果我们使用
createDocumentFragment()，可以先将这些对象存入其中，然后再将createDocumentFragment()导入html中，这样就重绘了一次，性能好很多。

修改元素

appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()

在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()

replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

删除元素

删除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

clone元素

cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

node.cloneNode(true);

属性操作

getAttribute()

getAttribute()用于获取元素的attribute值（实际就是获取元素的属性值）

node.getAttribute('id'); //这里就是去获取元素的id属性值，获取img的src属性也是如此

getAttribute

说明：图中获取img的src属性

createAttribute()

createAttribute()方法生成一个新的属性对象节点，并返回它。

attribute = document.createAttribute(name);

createAttribute方法的参数name，是属性的名称。

setAttribute()

setAttribute()方法用于设置元素属性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

等同于

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

实例

如何创建元素，设置属性

romoveAttribute()

removeAttribute()用于删除元素属性

node.removeAttribute('id');

removeAttribute

说明：对比getAttribute的img，src属性被移除

element.attributes

当然上面的方法做的事情也可以通过类操作数组属性element.attributes来实现

innerText

innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

比如说我们选择了一个元素，可以通过innerText获取其中的文本元素，例如，在下面的例子中，我们选择了这个div，将会过滤所有的标签，就保留其中的123456

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外层div的innerText返回内容是 "123456"

innerHTML

innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

相当于当我们选中一个元素时，返回他的所有的html标签

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外层div的innerHTML返回内容是 "<p>123<span>456</span></p>"

innerHTML使用实例

innerHTML使用实例
innerText和innerHTML的对比

对比1

对比2

innerText和innerHTML是可读可写的，所以也可以将它赋值？

常见使用方式

修改样式

可修改元素的 style 属性，修改结果直接反映到页面元素

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

获取样式 getComputedStyle

使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性 获取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class 操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

添加class

去除class

判断是否有相应class

样式的改变尽量使用 class 的新增删除来实现

<iframe src="http://js.jirengu.com/nupom/1/embed" class="" id="" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; border: 1px solid rgb(170, 170, 170); width: 770px; min-height: 300px; height: 213px;"></iframe>

页面宽高

element.clientHeight

image

element.offsetHeight

image

document.body.clientHeight
document.body.offsetHeight

docuemnt.body.style.border = "10px solid red"
docuemnt.body.clientHeight  //变小了
document.body.offsetHeight

element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight

document.body.scrollHeight

element.scrollTop 滚动的高度

document.body.scrollTop

window.innerHeight 窗口的高度

window.innerHeigh

element.getBoundingClientRect() 获取元素在视窗中的位置

问题1：如果判断一个元素距离 document 顶部的偏移

function getOffsetTop( elem ){
  var offsetLeft = 0
  do {
     offsetTop += elem.offsetTop
  } while( elem = elem.offsetParent )
  return offsetTop
}

或者

element.getBoundingClientRect().top  + document.body.scrollTop

问题2：如何判断一个元素是否出现在窗口视野中

问题3：如果判断页面滚动到底部

HTMLCollection 和 NodeList

节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。

NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性

以下方法获取的为HTMLCollection对象

document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")

以下方法获取的为NodeList对象

document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes

如何查看？

document.body.childNodes.constructor

HTMLCollection与NodeList基本相似

相同点：都是类数组对象，节点的变化都会实时反映在集合中

不同点：少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有

参考

What is the DOM?

各浏览器中的 NodeList 接口存在差异

Difference between HTMLCollection, NodeLists, and arrays of objects

进阶8.DOM

DOM

document 对象

document对象常用属性

document.location

document.open()、document.close()

document.write()

Element

查询元素

getElementById()

getElementsByClassName()

getElementsByTagName()

getElementsByName()

querySelector()

querySelectorAll()

创建元素

createElement()

createTextNode()

createDocumentFragment()

修改元素

appendChild()

insertBefore()

replaceChild()

删除元素

clone元素

属性操作

getAttribute()

createAttribute()

setAttribute()

romoveAttribute()

element.attributes

innerText

innerHTML

常见使用方式

修改样式

获取样式 getComputedStyle

class 操作

页面宽高

HTMLCollection 和 NodeList

参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读