javascript - DOM - 个人文章 - SegmentFault 思否

DOM

DOM就是大家一起YY出来的页面的一种结构。由3个部分组成，Document,Object,Model。
Document就是写代码的那些标签组成的，如下图：
document树状图

Object就是把Document转换成对象得到的，关系如下图。Javascript类型中，它们都属于Node，Node又属于Object，关系如下下图：
object树状图
/javascript类型关系

Model就是上面这样模式的名字，文档对象模型。

Node

正如像function,Array一样，Node也有很多自己的方法和属性。Array的方法和属性用来对数组进行操作，Node的方法和属性就用来对节点进行操作。对节点进行操作意思就是在DOM这颗树上爬来爬去，寻找需要的元素（element）,文本（text）,文档（document）等，进行【删增改查】。

Node主要属性

父节点和子节点

parentElement
parentNode

childNodes

获得目标元素的所有子节点，这是对代码来讲的，所以也包括了写代码时的回车换行（text节点）

children
```
获得目标元素的所有子标签
```
firstChild
```
获得目标元素第一个子节点
```
firstElementChild
```
获得目标元素第一个子标签
```
lastChild
```
获得目标元素最后一个子节点
```
lastElementChild
```
获得目标元素最后一个子标签
```

获取文本

innerText

修改节点的innerText，会删除节点里面的所有内容，改为修改的值

要在后面添加文本内容，请这样写：
var textnode=document.createTextNode("helloMyLove");    //创建文本节点
xxx.appendChild(textnode);      //添加文本节点

或者联成一句：
xxx.appendChild(document.createTextNode("helloMyLove");

textContext

请参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent
???其中包括和 innerText 的区别???

outerText(whatever)

获取本身属性

nodeName

获得节点名称，注意除了 svg 外，名称都是大写

nodeType

获得节点性质
返回值1、2、3、4、5......，从前内存紧张，存数字节省内存，对应的性质自己记。。。。。。

参考网址：https://developer.mozilla.org...
常用nodeType
弃用nodeType

nodeValue(whatever)
```
返回或设置节点值
```

兄弟节点

nextSibling
nextElementSibling
previousSibling
```
获得目标元素前一个节点
```
previousElementSibling
```
获得目标元素前一个标签
```

其它

ownerDocument(whatever)

返回文档属于哪一个文档，适用于存在 iframe 的情况

Node主要方法

操作子节点

appendChild()

removeChild()

将子元素移除页面，但子元素依然存在内存中

replaceChild()

替换一个子元素，xxx.replaceChild(yyy);
被替换的元素 xxx 被安排到内存里去了

操作节点

cloneNode(true/false)

克隆一个节点
true 为深拷贝，拷贝节点和所有子孙节点，包括内容
false 为浅拷贝，仅拷贝节点本身，不拷贝内容

请参考：
https://developer.mozilla.org...

insertBefore()

normalize()

使节点规范化

由于某种原因，DOM中产生了相邻的两个文本节点或者空的文本节点，normalize规范化就是用来消除这种状况。
拼接两个相邻的文本节点或者删除空的文本节点或者其它方法。

请参考：
https://developer.mozilla.org...

判断节点

contains()

hasChildNodes()

判断是否有子节点，返回 true/false

isEqualNode()
```
是否是同样的？
```

isSameNode()

是否是同一个？

???例子???

<body>
    <div class="red">hahaha</div>
    <div class="red">hahaha</div>
</body>

var div1=document.body.children[0];    //获取第一个div
var div2=document.body.children[1];    //获取第二个div

div1.isEqualNode(div2);    //true
div1.isSameNode(div2);     //false

Document

Document常用属性

body
```
获取body元素
```
characterSet
```
获取字符编码
```
childElementCount
```
获取子元素个数
```
children
doctype
documentElement
```
获取根元素，例如<html>
```
domain
```
获取网页域名
```
head
hidden
images
```
获取所有图片
```
links
```
获取所有<a>标签
```
location
```
获取网页地址详细信息
```

onxxxxxxxxx

各种事件
onclick、onscroll、onmouseover、onkeypress

origin
plugins
```
获取有没有开启插件
```
readyState
```
是否还在加载
```
referer
```
引荐者
就是网页是从哪里跳转来的，或者是直接进的网页，就没有引荐者
内部网址可能拒绝由外部网页跳转来的请求或者直接访问请求
```
请参考：
https://developer.mozilla.org...

上下面是一个没有利益关系的百度首页的例子：
图片就是上上面这种样子。如上图，通过百度首页获取到的图片，其referer显示为https://www.baidu.com/index.p...。如下图，通过直接在地址栏中输入图片的地址来获取图片，它就没有referer这个请求了，因为是直接找到它的，不是通过别的网页才找到它的。这个例子中，百度允许通过图片路径直接访问这张图片，你也可以设置为无法直接获取，只能通过某些特定的网页才能看到这张图片，就是一定要有referer。
scripts
scrollingElement
```
获取正在滚动的元素
```
styleSheets
title

visibilityState

判断页面是否正在被浏览，可见状态

Document常用方法

close()/open()
```
关闭/打开文档编辑
```
文档编辑声明周期

一般浏览器开始执行代码，文档编辑open，然后写入write，最后代码结束，文档编辑close。这里只针对使用document.write()系列的文档写入方式。如下面动图，使用document.write()编辑文档会覆盖上一次文档open时写入的所有内容，所以，慎用。
createDocumentFragment()
createElement()
createTextNode()

execCommand()

该方法可以用来操作文本，包括背景颜色、粗细、复制粘贴等
多用于设计 富文本 编辑器

exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
```
获取用户选中的文本
```
hasFocus()
```
用户是否聚焦在页面上
```
querySelector()
querySelectorAll()
registerElement()(whatever)
write()(whatever)
```
document写入
```
writeln()(whatever)
```
doucment在一行中写入
```

Element

请参考：
https://developer.mozilla.org...

DOM

DOM

Node

Node主要属性

父节点和子节点

获取文本

获取本身属性

兄弟节点

其它

Node主要方法

操作子节点

操作节点

判断节点

Document

Document常用属性

Document常用方法

Element

BreezingSummer

引用和评论

git

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号