初学DOM，将DOM部分归纳一下，从获取元素，事件基础，操作元素方面 注意从上到下加载，所以要先有标签，后有JS 注意 注意： 以下是HTML5中的 注意 返回的是非动态集合 事件的三个部分 注意 注意 首先排除其他人，再设置自己 与 element.属性 的区别是可以添加自定义的属性值 与 element.属性=‘值’ 的区别是可以更改自定义的属性值 HTML5中有这种方式获得属性 每个节点至少拥有nodeType节点类型，nodeName节点名称 ，nodeValue节点值 得到最近的父节点，如果没有返回为空 得到所有的子节点，包括换行之类的 注意是所有节点中的第一个或者最后一个，实际用处不大QAQ 有什么问题欢迎指正呀~
这里pick pink老师 讲的真的超级细首先，先看一下DOM树（这张图做的有点糙，请见谅见谅哈）
文档：一个页面就是一个文档，在DOM中使用document
元素：页面中所有的标签都是，在DOM中使用element
节点：页面中所有的内容都是，在DOM中使用node
这些都是对象一、获取元素
1.获取ID
document.getElementById( );
<body> <p id="header">张三</p> <script> var p = document.getElementById('header'); console.log(p); </script> </body> 2、获取标签
document.getElementsByTagName( );
<body> <p>一</p> <p>二</p> <p>三</p> <script> var p = document.getElementsByTagName('p'); console.log(p); </script> </body> 3.通过name属性进行查找
document.getElementsByName( );
<body> <input type="radio" value="a" name="sex1">男 <input type="radio" value="b" name="sex1">女 <script> var p = document.getElementsByName('sex1'); console.log(p); </script> </body>
4.查找指定的class
document.getElementsByClassName( );
<body> <p class="text">张三</p> <p class="text">李四</p> <script> var a = document.getElementsByClassName('text');//在这个地方参数这儿，不用加.哦 console.log(a); </script> </body> 5.只找一个元素
document.querySelector( );
<body> <p class="text">张三</p> <p class="text">李四</p> <script> var a = document.querySelector('.text');//这里要加.的哦。。。。如果是ID选择器加#，但是这个后台只显示张三 console.log(a); </script> </body> 6.找多个元素
<body> <p class="text">张三</p> <p class="text">李四</p> <script> var a = document.querySelectorAll('.text');//后台两个都显示 console.log(a); </script> </body> 二、事件基础
<body> <p class="text">张三</p> <p class="text1">李四</p> <script> //1. 获取事件源 var a = document.querySelector('.text'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 a.onclick = function() { alert('现在是六月'); } </script> 三、操作元素
1.改变元素
element.innerText = ( );
element.innerHTML = ( );
<body> <p class="text">张三</p> <p class="text1">李四</p> <script> //1. 获取事件源 var a = document.querySelector('.text'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 a.onclick = function() { a.innerText = ('王五'); } </script> </body> <body> <p class="text">张三</p> <p class="text1">李四</p> <script> //1. 获取事件源 var a = document.querySelector('.text'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 a.onclick = function() { a.innerHTML = ('王五'); } </script> </body> 2.改变图片、链接
src herf 属性
<body> <button id="a">小花</button> <button id="b">小草</button> <img id="c" src="xiaohua.jpg"> <script> //1. 获取事件源 var a = document.getElementById('a'); var b = document.getElementById('b'); var c = document.getElementById('c'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 b.onclick = function() { c.src = "xiaocao.jpg"; } a.onclick = function() { c.src = "xiaohua.jpg"; } </script> </body> 3.表单
可以通过改变value，type 等值来实现目的
<body> <button id="a">按钮</button> <input type="text" id="b" value="请输入搜索内容"> <script> //1. 获取事件源 var a = document.getElementById('a'); var b = document.getElementById('b'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 a.onclick = function() { b.value = '被点击了'; } </script> </body> 4.样式属性
<body> <div id="c"> <button id="a">按钮</button> <input type="text" id="b" value="请输入搜索内容"> </div> <script> //1. 获取事件源 var a = document.getElementById('a'); var b = document.getElementById('b'); var c = document.getElementById('c'); //2. 绑定事件 // .onclick // 3.添加处理事件的程序 a.onclick = function() { b.value = '被点击了'; c.style.backgroundColor = 'pink'; } </script> </body> 5.排他思想
6.获得属性值
element.getAttribute(‘属性’)；
HTML5中一般我们自定义的属性我们用data- 开头<body> <div id="demo"> </div> <script> var div = document.querySelector('div'); console.log(div.getAttribute('id')); </script> </body> <body> <div id="demo" data-index="demo1">//data-index属于自定义的属性 </div> <script> var div = document.querySelector('div'); console.log(div.getAttribute('data-index')); </script> </body> 7.修改属性值
element.setAttribute(‘属性’, ‘值’);
、<body> <div id="demo" data-index="demo1"> </div> <script> var div = document.querySelector('div'); div.setAttribute('data-index', 'demo2'); </script> </body> 8.移除属性
element.removeAttribute(‘属性’);
<body> <div id="demo" data-index="demo1"> </div> <script> var div = document.querySelector('div'); div.removeAttribute('data-index'); </script> </body> 9.获取自定义属性
div.dataset.index;//这里的dataset相当于一个集合，index是我自己定义的属性 四、节点操作
nodeType的值
元素节点为 1
属性节点为 2
文本节点为 31.父级节点
element.parentNode;
<body> <div id="demo"> <p></p> </div> <script> var p = document.querySelector('p'); console.log(p.parentNode); </script> </body> 2.子节点
a. 所有节点element.childNodes
<body> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <script> var ol = document.querySelector('ol'); console.log(ol.childNodes); </script> </body> b.只获得元素节点element.children
<body> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <script> var ol = document.querySelector('ol'); console.log(ol.children); </script> </body> c.获取第一个或者最后一个节点
parentnode.firstChild；
parentnode.lastChild;
<body> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <script> var ol = document.querySelector('ol'); console.log(ol.firstChild); </script> </body> d.获取第一个或者最后一个元素节点（IE9以上支持）
parentnode.firstElementChild；
parentnode.lastElementChild;
<body> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <script> var ol = document.querySelector('ol'); console.log(ol.firstElementChild); </script> </body> 3.兄弟节点
a. 下一个兄弟节点 node.nextSibling;
上一个兄弟节点node.previousSibling;
<body> <div></div> <p></p> <script> var div = document.querySelector('div'); console.log(div.nextSibling); </script> </body> b. 下一个兄弟元素 节点 node.nextElementSibling;
上一个兄弟元素节点node.previousElementSibling;
<body> <div></div> <p></p> <script> var div = document.querySelector('div'); console.log(div.nextElementSibling); </script> </body> 4.创建节点
document.createElement(‘li’);
<body> <ul> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul'); var li = document.createElement('li'); //创建节点 ul.appendChild(li); //添加节点 </script> </body> 5.添加节点
a. 父.appendChild(子);
<body> <ul> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul'); var li = document.createElement('li'); //创建节点 ul.appendChild(li); //添加节点 </script> </body> b. node.insertBefore(孩子，指定元素);
<body> <ul> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul'); var li = document.createElement('li'); //创建节点 ul.insertBefore(li, ul.children[0]); //添加节点 </script> </body> 6.删除节点
父.removeChild(子);
<body> <ul> <li>一</li> <li>二</li> </ul> <script> var ul = document.querySelector('ul'); ul.removeChild(ul.children[0]); </script> </body> 7.拷贝节点
内容.cloneNode(true)；
<body> <ul> <li>一</li> <li>二</li> </ul> <script> var ul = document.querySelector('ul'); var lili = ul.children[0].cloneNode(true); //1.括号里填true 是深拷贝，复制里面的内容加标签 2.不填或者是填false的话，是浅拷贝，只是标签 ul.appendChild(lili); </script> </body>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
