码迷,mamicode.com
首页 > 其他好文 > 详细

Document Object Model

时间:2017-08-26 22:07:30      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:creat   版本   文档   tor   标准   标签   cto   [1]   classname   

什么是DOM W3C制定的书写HTML分析器的标准接口规范

全称 Document Object Model 文档对象模型
DOM为HTML文档提供的一个API(接口) 可以操作HTML文档

<!DOCTYPE html> 不是标签
作用 声明 告诉浏览器采用哪个版本的html去解析代码

发展历程 包含0到3级 0,3级并不是W3C的标准

当浏览器加载HTML页面时,就会创建一个DOM树结构

四个节点

文档 元素 文本 属性
9 1 3 2
判断节点类型

https://runjaelyn.github.jo

DOM查询

document.getElementById( id属性值 )
document.getElementsByClassName( class属性值 )
document.getElementsByTagName( 标签名 )
document.getElementsByName( name属性值 )

let box = document.getElementsById("box");
console.log(box);

let wrap = document.getElenmentsByClassName("warp")[0];
console.log(wrap);

let divs = document.getElementsByTagName("div")[1];
console.log(divs);

let username = document.getElementsByClassName("username");
console.log(username);

querySelector()
返回第?个选择器匹配的 HTML 页面元素。

querySelectorAll()
返回全部选择器匹配的 HTML 页面元素。

Document 对象、Element 对象和 Node 对象这三个对象


(空格和换行都是文本节点)
Document 对象
创建文本节点
let divEle = document.createElement("div");
document.body.appendChild( divEle );
var text = document.createTextNode("hello world");
divEle.appendChild( text );

创建属性节点
let node = document.getElementById("div"); // 获取 <div> 标签
let attr = document.createAttribute("my_attr"); // 创建属性节点
attr.nodeValue = "属性值"; // 设置属性节点的 nodeValue
node.setAttributeNode( attr );
缓存 DOM 查询
当把 DOM 查询的结果保存在?个变量后,实际上是把获取的指定标签在 DOM 节点树中的位置保存在变量中。这个元素
节点(标签)的属性和方法可以通过这个变量来使用。

通过 getElementsByName() 、 getElementsByTagName() 和 getElementsByClassName() 方法获取的
NodeList 就是动态的 NodeList。

通过 querySelectorAll() 方法获取的 NodeList 就是动态的 NodeList。

parentNode是一种方法

Document Object Model

标签:creat   版本   文档   tor   标准   标签   cto   [1]   classname   

原文地址:http://www.cnblogs.com/zl0228/p/7436401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!