diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" new file mode 100644 index 0000000000000000000000000000000000000000..c7dcd36f4af35e99b33257ad0117c47154f6e840 --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" @@ -0,0 +1,41 @@ + + + + + Title + + + + +
+ +
+ + + + \ No newline at end of file diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" new file mode 100644 index 0000000000000000000000000000000000000000..31436460042da3ec5e85c9f1be415c3b7f5aa8dc --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" @@ -0,0 +1,146 @@ + + + + + + + + 浏览器对象模型(Browser Object Model) + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
郑玮喆庄云廖治先郑文源戴俊锋陈昊童谢金金占志新张淑芳
刘永潘廖柏成郑宗帅李韦峰吴欣燕陈梅香陈立智袁贵森赵浩敏
林世涛罗启恒卢国建黄柱菘陈鹏张耀仁陈华伟张正豪韦仲晓
黄富贵陆建锋曾德森吴文龙陆利群黄雄王世财张先杰胡基耀
马鑫涛李涛杨凌翔罗此东唐皓颖白婉婷
+ + + + \ No newline at end of file diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" new file mode 100644 index 0000000000000000000000000000000000000000..0206b309a2886257badb17d8440ad1833cc70c7a --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" @@ -0,0 +1,70 @@ + + + + + Title + + + + + +
+ + + + \ No newline at end of file diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..28c79ce33f528c6aa63c389d3d6209cb337eb930 --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" @@ -0,0 +1,287 @@ +# 11.19DOM JS笔记 + +## 1.节点 + +### 1.1 什么是document对象 + +document对象是文档的根节点,每张网页都有自己的document对象只要浏览器开始载入 HTML 文档, + +该对象就存在了,可以直接使用。 + +### 1.2 document对象的属性 + +### 1.3 document.doctype + +document.doctype,指向节点,即文档类型(Document Type Declaration,简写DTD)节点。 + +HTML 的文档类型节点,一般写成。如果网页没有声明 DTD,该属性返回null。 + +```html + + + + + + + + +``` + +### 1.4document.documentElement + +document.documentElement属性返回当前文档的根节点(root),一般是节点。 + +### 1.5document.head + +document.body属性指向节点。 + +### 1.6 document.body + +document.head属性指向节点。 + +### 1.7document对象的方法 + +### 1.8document.write() + +document.write方法用于向当前文档写入内容。 + +document.getElementsByTagName() +document.getElementsByTagName方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象 + +(HTMLCollection实例),可以实时反映 HTML 文档的变化。如果没有任何匹配的元素,就返回一个空集。 + + +```html + + + + +

文本1

+

文本2

+

文本3

+ + + + +``` + +## 1.9document.getElementsByClassName() + +document.getElementsByClassName方法返回一个类似数组的对象(HTMLCollection实例),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中。 + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + + +``` + +## 2.document.getElementById() + +document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。 + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + + +``` + +### 2.1document.querySelector()和document.querySelectorAll() + +document.querySelector方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件, + +则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。 + +document.querySelectorAll方法返回所有匹配选择器的元素节点。 + + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + +``` + +### 2.2document.createElement() + +document.createElement方法用来生成元素节点,并返回该节点。 + +```js +var newDiv = document.createElement('div'); +``` + +### 2.3document.createTextNode() + +document.createTextNode方法用来生成文本节点(Text实例),并返回该节点。 + +```js +var newContent = document.createTextNode('Hello'); +``` + +### 2.4document.createAttribute() + +document.createAttribute方法生成一个新的属性节点(Attr实例),并返回该节点。它的参数是属性的名称。 + +```js +var attribute = document.createAttribute("class"); +``` + +### 3.元素(elements) + +```js + + //查看body中有几个元素节点 + console.log(document.body.childElementCount); + console.log(document.body.children); + //查看父节点 + console.log(document.body.children[0].parentElement); + //上一个元素节点 + console.log(document.body.children[1].previousElementSibling); + //下一个元素节点 + console.log(document.body.children[1].nextElementSibling); + //查看子节点 + console.log(document.body.firstChild);//所有节点中的第一个节点 + console.log(document.body.firstElementChild);//找第一个元素节点 + + //查看父节点 + console.log(document.body.children[0].parentElement);//结果body + +``` + +### 4.DOM节点方法 + +```js + //DOM0 + + //根据class获取元素: 返回: HTMLCollection (数组) + // console.log(document.getElementsByClassName('H2')); + + //根据name属性获取元素对象: NodeList(伪数组):只能获取下标和长度 + // console.log(document.getElementsByName('username')); + + //根据标签名获取元素对象:返回 HTMLCollection + // console.log(document.getElementsByTagName('input')); + + //根据id属性获取元素对象,返回当前元素对象 + // console.log(document.getElementById('thirdH2')); + + //DOM2 + //找class=H2的元素对象,如果不止一个,返回第一个元素对象 + //根据class : ('.className') + //根据Id : ('#id') + //根据标签名: ('div') + // console.log(document.querySelector('div')); + //找全部 + // console.log(document.querySelectorAll('.H2')); +``` + +### 5.节点增删改 + +```html + + + + + + + Document + + +
+

我是将被删除的h2

+
+ + + +``` + +### 5.1增 + +```js + var div = document.querySelector('#box'); + //创建元素节点 + var newH2 = document.createElement('h2'); + var txt = document.createTextNode('我是新添加的H2'); + newH2.appendChild(txt); + // 添加子元素节点 + div.appendChild(newH2); +``` + +### 5.2删 + +```js + //删除子节点:removeChild(元素对象:h2) + var h2 = document.getElementById('h2'); + div.removeChild(h2); +``` + +### 5.2改 + +```js + var newH3 = document.createElement('h3'); + var txt = document.createTextNode('替换的h3'); + var h2 = document.getElementById('h2'); + newH3.appendChild(txt); +//改:replaceChild + div.replaceChild(newH3,h2); +``` +