1.DOM对象-01
-
获取DOM元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> <!-- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 --> <!-- dom元素和node(节点)的区别 --> <!-- dom元素指的是页面的标签,通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom元素; node节点指的是页面的任意元素(页面的每个东西都是节点), 标签 换行符 注释 空格 属性 标签内容等都可以被当做node节点 既然是节点,也是可以被js选中的 --> <!-- js可以操作dom元素,包括dom元素的属性和内容 --> // 当文档/页面加载完毕后才会执行onload函数 window.onload = function(){ // 1.id选择 极特殊的情况 var p1 = document.getElementById('p1'); console.log(p1); // 2.通过标签名选中 极少,因为重复的标签很多!! var h2 = document.getElementsByTagName('h2'); console.log(h2); // 数组类型 console.log(h2[0]); //遍历获取每一个h2 for (var i = 0; i < h2.length; i++) { console.log(h2[i]) ; } //3.通过class选中 最常用!! ie6,7,8不支持! 而且ie8不支持console.log() // 注意 : getElementsByClassName()函数的返回值是一个数组 var a = document.getElementsByClassName('a1'); console.log(a); // 数组 console.log(a[0]); //4.通过标签的name属性来获取的对象集合 var li = document.getElementsByName('hobbys') ; console.log(li) ; } </script> </head> <body> <!-- 任何一个标签都有class 属性 和id属性 ; 一般class用于设置样式,而id一般用于js选择 --> <p id="p1">今天好冷啊!</p> <h2>今天天气不错111</h2> <h2>今天天气不错啊22222</h2> <a class="a1">MSR学院</a> <a class="a1">MSR学院</a> <input type="checkbox" name="hobbys" id="" value="" /> <input type="checkbox" name="hobbys" id="" value="" /> <input type="checkbox" name="hobbys" id="" value="" /> <input type="checkbox" name="hobbys" id="" value="" /> </body> </html> -
获取父类节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; height: 400px; background-color: pink; /* background-image: url(''); */ } .box .innerBox{ width: 200px; height: 200px; background-color:green; background-size: 100%; } </style> </head> <body> <div class="box"> 文字 <div class="innerBox"> </div> </div> <button class="btn" onclick="change('我喜欢编程')">恢复</button> <script> // 添加事件的两种方式 // 通过下标获取第一个元素 var innerBox = document.getElementsByClassName('innerBox')[0]; console.log(innerBox); // api: dom.parentNode ==> 通过dom对象获取该dom的父类节点. var pNode = innerBox.parentNode; console.log(pNode); var btn = document.getElementsByClassName('btn')[0]; // background-color 这种形式是不能做为变量或者key的 -----> backgroundColor //注意: 在js中操作css中的属性,一般会把abc-xx转换为abcXx 小驼峰命名法 // 事件 : 点击绿色盒子 使外层盒子变红 // 事件的三要素 1.谁(事件对象) 2.什么事件(操作:点击?聚焦?离焦?等) 3.怎么处理(效果怎么展示) //方式1 : DOM对象的onclick属性 innerBox.onclick = function(){ pNode.style.backgroundColor = 'red'; pNode.style.fontSize = '35px'; pNode.style.backgroundImage = 'url(img/01.jpg)' ; pNode.style.backgroundSize = '100% 100%' ; } //恢复颜色 // btn.onclick = function(){ // pNode.style.backgroundColor = 'pink'; // } // 方式2 : 在标签中定义事件,事件触发函数 function change(num){ alert(num); pNode.style.backgroundImage = 'none'; pNode.style.backgroundColor = 'pink'; } </script> </body> </html>
2.DOM对象-02
-
获取兄弟节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>我是p1</p> <p>我是p2</p> <p class="p3">我是p3</p> <!--下面是p4--> <p>我是p4</p> <script> var p3= document.getElementsByTagName('p')[2]; console.log(p3); //nextSibling 下一个兄弟节点 回车换行都会被查找. 回车称为文本节点. // 嫡出 : 正妻所生的儿子 var p4 = p3.nextSibling; console.log('nextSibling = ') ; console.log(p4) ; console.log('nextSibling = ') ; console.log(p4.innerText) ; // 庶出 var p4 = p3.nextElementSibling; console.log('nextElementSibling = ') ; console.log(p4) ; console.log('nextElementSibling = ' + p4.innerText) ; //兼容 var p4 = p3.nextElementSibling || p3.nextSibling; console.log(p4); p4.style.backgroundColor='red' ; /* nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点 （包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSibling属性只返回元素节点之后的兄弟元素节点 (不包括文本节点、注释节点）； 注意: 空格、回车也会看作文本，以文本节点对待。 */ </script> </body> </html> -
获取孩子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box" class="box"> <p>我是p1</p> <p>我是p2</p> <!-- 我是p3 --> <p>我是p3</p> <p>我是p4</p> </div> <script> var box = document.getElementById('box'); //firstChild 找到第一个孩子节点,包括回车空格等文本在内. var p1 = box.firstChild; console.log(p1) ; var p1 = box.firstElementChild; console.log(p1) ; //兼容写法 var p1 = box.firstElementChild || box.firstChild; p1.style.backgroundColor = 'red'; // childNodes 属性返回所有的节点，包括文本节点、注释节点； // children 属性只返回元素节点； var ps = box.children; console.log('children : ') ; console.log(ps) ; var ps = box.childNodes; console.log('childNodes : ') ; console.log(ps) ; for(var i = 0 ; i < ps.length ; i ++){ console.log(ps[i]); // 每个标签有一个 nodeType的属性 用于标明 当前标签的类型. // nodeType == 1 表示的是元素节点 记住 元素就是标签 // nodeType == 3 是文本节点 了解 // nodeType = 8 注释 了解 document.write(ps[i].nodeType) document.write('<br>') } </script> </body> </html> -
创建节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box"> <p class="p1">我是p1标签</p> </div> <script> var boxEle = document.getElementsByClassName('box')[0]; //内存中创建标签 var pEle = document.createElement('p'); //给标签内容 pEle.innerHTML='勤能补拙是良训,一份辛劳一分才!' ; //插入节点 父节点.appendChild(); boxEle.appendChild(pEle); // 父节点.insertBefore(要插入的节点，参考节点)； var img = document.createElement('img'); img.src = 'img/wx.jpg'; // img.width = '200' ; // img.height = '300' ; img.style.width = '200px' ; img.style.height = '300px' ; img.alt = '飞了' ; boxEle.insertBefore(img, pEle); </script> </body> </html> -
设置节点属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .danger{ color: red; } </style> </head> <body> <h1>Js 操作标签的属性</h1> <p class="p1 danger" title="再看我就把你喝掉">我是一个p标签</p> <button>瞅你咋地!</button> <script> // 重点 Attribute var pEle = document.getElementsByClassName('p1')[0]; var btn = document.getElementsByTagName('button')[0]; // 获取：getAttribute(名称) // 设置：setAttribute(名称, 值) // 删除：removeAttribute(名称) //添加属性 但是只能添加具有的属性 console.log('getAttribute : ' + pEle.getAttribute('title')) ; pEle.setAttribute('title','你愁啥!'); console.log('getAttribute : ' + pEle.getAttribute('title')) ; pEle.setAttribute('id', 'p1'); console.log('getAttribute id : ' + pEle.getAttribute('id')) ; // pEle.setAttribute('zhangsan', 'p1'); //添加点击事件 pEle.onclick = function(){ // 获取属性 var clazz = this.getAttribute('title'); console.log(clazz); pEle.setAttribute('class',''); } //当btn被点击的时候 去掉p标签的title属性 btn.onclick = function(){ pEle.removeAttribute('title'); pEle.setAttribute('class','danger'); } </script> </body> </html>