讲一讲 JavaScript DOM

  • A+
所属分类:JavaScript

Document Object Model

每个Window对象都有一个document属性指向Document

Document对象表示窗口的内容.讲一讲 JavaScript DOM

1. 获取文档元素

HtmlDocument还定义了一些快捷的访问方式.

只读的img,form,a(包含href属性的)等元素的集合.(返回HTMLCollection)

因为在Document对象中为form img iframe applet embed ojbect元素设置name属性,既在Document对象中创建以此name属性值为名字的属性.

不太建议这样的使用方法,以下都返回的是HTMLColection

2. Node属性

  1. parentNode : 该节点的父节点,类似Document对象此属性为null.
  2. childNode : 只读的类数组对象(NodeList对象),实时表示
  3. firstChild lastChild
  4. nextSibling previoursSibling
  5. nodeType : 节点类型
    • 9表示Document节点
    • 1表示Element节点
    • 3表示Text节点
    • 8表示Comment节点
    • 11表示DcoumentFragment节点
  6. nodeValue : Text节点/Commetn节点的文本内容.
  7. nodeName : 元素的标签名,以大写形式表示

3. HTML属性作为Element的属性

4. 获取和设置非标准HTML属性

Element定义的方法

  1. setAttribute
  2. getAttribute
  3. hasAttribute
  4. removeAttribute

5. data- 数据集属性

因为在第四节中定义了非标准的HTML属性,导致HTML不再是合法的HTML,所以

在HTML5新增了任意以data-为前缀的小谢属性名字都是合法的,并且HTML也是合法的

HTML5在Element对象定义了dataset属性,指向一个对象,它的各个属性对应于去掉前缀data-属性.

6. 作为Attr节点的属性

Node定义了attributes属性.非Element对象,该属性为null

对应Element对象,attributes属性是只读的类数组对象.它代表元素的所有属性,并且是实时的.

当索引attributes对象得到的都是Attr对象,Attr有name和value属性

7. 作为HTML的元素内容

  1. innerHTML
  2. outerHTML
    outerHTML返回标签的开始标签和结束标签,还有内容.当替换该属性时,标签也被替换
  3. insertAdjacenHTML

该方法在HTML5标准化

有两个参数

1.为依赖的参数位置

以上的1234和参数插入的未知对应

2.为HTML标记字符串

8. 作为纯文本的元素内容

textContent和innerText的区别

  1. textContent只是把Text节点串联在一起.
  2. ineerText不返回<script>元素,和忽略多余的空白.,table trbody tr的innerText是只读属性.

9 创建节点

  1. createElement;
  2. createTextNode;
  3. createComment;
  4. createDocumentFragment;
  5. cloneNode(true/false) : 是否深层复制
  6. importNode() 如果它传递另一个文档的一个节点,它将返回一个适合本文档插入的节点的副本,第二个参数是布尔选择是否深层复制.

10 插入节点

  1. appendChild() 插在调用者的最后一个子节点
  2. insertBefore()

有两个参数

1).待插入的节点.

2).父节点的子节点. 待插入节点会插在他前面.

这两个方法还可以帮节点移位,文档中的一个节点再次插入,会删除旧的.

11. 删除和替换节点

  1. removeChlid

2. replaceChild

12. 其他文档属性

  1. document

cookie

domain

lastModified

location

referrer

title

URL

13.查询选取文本

判定用户选择了什么文本

14. 可编辑内容

  1. HTML设置contenteditable属性
  2. 设置JavaScript

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: