From 78aba71ec5f9fdb5a14fa2c868bb60afcd2d1d3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98my76572?= Date: Sun, 22 Nov 2020 23:26:37 +0800 Subject: [PATCH] js --- JavaScript/DOM.md | 62 ++++++++++++++++++++++++++++++- JavaScript/test/dom/document.html | 40 ++++++++++++++++++++ JavaScript/test/dom/dom.html | 39 +++++++++++++++++++ JavaScript/test/dom/element.html | 24 ++++++++++++ JavaScript/test/dom/node.html | 38 +++++++++++++++++++ 5 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 JavaScript/test/dom/document.html create mode 100644 JavaScript/test/dom/dom.html create mode 100644 JavaScript/test/dom/element.html create mode 100644 JavaScript/test/dom/node.html diff --git a/JavaScript/DOM.md b/JavaScript/DOM.md index a013ad6..c3a782c 100644 --- a/JavaScript/DOM.md +++ b/JavaScript/DOM.md @@ -1,9 +1,57 @@ ## 基本概念 -1. 节点: 元素，属性和文本统称节点。 元素是属性和文本的父节点 +1. 节点: 元素，属性和文本,注释节点等12种统称节点。 元素是属性和文本的父节点 2. 元素: div a p span [方法](#yuansu) 3. 属性: href id class [方法](#shuxing) 4. 文本: 具体的内容 [方法](#wenben) +## Node类型 +1. node节点的关系 +> 父子关系：parentNode firstNode lastChild [childNodes](#childNodes) +> 兄弟关系：nextSibling perviousSibling +2. 操作node节点 +> appendChild() +> replaceChild() +> insertBefore() + + + +## Docunemt对象(doument对象表示整个html页面) + +### document返回值： +|名称|区别|举例| why | +|:-:|:-:|:-:| +|节点||document.body //`...`| 当整个html中的标签元素唯一时，返回节点 | +|HtmlCollection||| +|NodeList||| + +### 属性和方法 +````documentElement +document == windows.document; //document是一个全局变量，表示整个html页面 +console.log(document); //整个html页面的所有元素（doctype的声明和html树） +var doctype = document.doctype; //doctype的声明 +var html = document.documentElement; //html树 ... +document.head // ... +document.body // ... +document.body.childNodes // NodeLists body下的节点。 +document.title // title的文本 +document.links // 所有的a标签 HTMLCollection +document.images // 所有的img标签 HTMLCollection +document.forms // 所有的form标签 HTMLCollection +document.anchors// 所有的name特性标签 HTMLCollection + +document.URL; //全部地址 +document.domain; //域名 +document.referrer; //上一个url + +document.write(); +document.writeIn(); +```` + +> 有了 document 类，我们就能获取html的节点元素。如 document.body.childNodes ，但是需要明白NodeList的数组结构,(如换行也是NodeList的value值 => text文本)。 +为了更加便捷的获取body中的元素，我们有了Element元素对象 + + +## Element对象 ###

元素的增删改查

|方法名| 返回值 |作用 | 举例 | 补充 | |:-:|:-:|:-:|:-:|:-:| @@ -15,6 +63,18 @@ | querySelectorAll | object(数组) |||| | forms ||||| +### 属性和方法 +```` +var div = document.getElementById("mydiv"); + +div.tagName; // "DIV" 获取标签名 +div.title; <=> div.getAttribute("title") // 获取标签属性 标题 +div.id; <=> div.getAttribute("id") // 获取标签属性 id +div.className; <=> div.getAttribute("class") // 获取标签属性 类 +div.title = "我的盒子" <=> div.setAttribute("id","new_id") //修改属性 +div.removeAttribute(); //移除属性 +```` + ##

属性的增删改查

diff --git a/JavaScript/test/dom/document.html b/JavaScript/test/dom/document.html new file mode 100644 index 0000000..06e8d8c --- /dev/null +++ b/JavaScript/test/dom/document.html @@ -0,0 +1,40 @@ + + + + + + Document类型 + + + +
+ 1 + 2 + 3 + 4 + + + +
+
+ + + \ No newline at end of file diff --git a/JavaScript/test/dom/dom.html b/JavaScript/test/dom/dom.html new file mode 100644 index 0000000..7f54c98 --- /dev/null +++ b/JavaScript/test/dom/dom.html @@ -0,0 +1,39 @@ + + + + + + Dom示例 + + +
+ dom的示例 +
+
+ dom的示例 +
+
+ dom的示例 +
+
+
+
+ + + \ No newline at end of file diff --git a/JavaScript/test/dom/element.html b/JavaScript/test/dom/element.html new file mode 100644 index 0000000..b295bd8 --- /dev/null +++ b/JavaScript/test/dom/element.html @@ -0,0 +1,24 @@ + + + + + + Element对象 + + +
+
+ + + \ No newline at end of file diff --git a/JavaScript/test/dom/node.html b/JavaScript/test/dom/node.html new file mode 100644 index 0000000..422bb86 --- /dev/null +++ b/JavaScript/test/dom/node.html @@ -0,0 +1,38 @@ + + + + + + Node类型 + + +
+
11111111111111111111111111111111111111111111
+
2
+
3
+
4
+
+ + + + \ No newline at end of file -- Gitee