一个人做b2b2c网站/网络营销的策略有哪些
对于JavaScript，为了能够使JavaScript操作HTML、JavaScript就有了一套自己的dom编程接口
对于HTML，dom使得html形成一棵dom树。包含文档、元素、节点
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型
关于dom操作，我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>节点操作</title></head><body><!-- 节点的优点 --><div>我是div</div><span>我是span</span><ul><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li></ul><div class="demo"><div class="box"><span class="erweima"></span></div></div><script>//为什么要学节点操作呢？//获取元素通常使用两种方式：//1.利用DOM提供的方法获取元素//document.getElementById()、document.getElementsByTagName()、document.querySelector()等//逻辑性不强、繁琐//2.利用节点层级关系获取元素//利用父子节点关系获取元素//逻辑性强，但是兼容性稍差//两种方式都可以获取节点，但节点操作更简单//页面中所有元素都叫做节点（空格、换行都是节点，算作文本节点//所有节点都可通过JavaScript访问，所有HTML元素（节点）均可被修改，创建删除//节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性//元素节点 nodeType为1 属性节点nodeType为2 文本节点nodeType为3（文本节点包含文字、空格、换行等）//实际开发中，节点操作主要操作的是元素节点//节点层级：利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系//1.父级节点 node.parentNodevar erweima=document.querySelector('.erweima');console.log(erweima.parentNode);//找二维码的爹，结果获取到爹：box//注意：得到离元素最近的父级节点(亲爸爸)，如果找不到父节点就返回为null//1.子节点 childNodes 所有的子节点包含元素节点 文本节点等等var ul=document.querySelector('ul');console.log(ul.childNodes);//4个li元素节点+5个空格（文本）节点//parent.childNodes(标准) 返回包含指定节点的子节点集合，该集合为即时更新的集合//注意：返回值里包含所有的子节点，包括元素节点、文本节点等//如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes//parentNode.children（非标准） 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回（重点掌握）//虽然children是一个非标准，但是各个浏览器都支持，所以我们放心使用啦//2.children获取所有的子元素节点，实际开发常用console.log(ul.children);//节点操作之第一个子元素和最后一个子元素//parentNode.firstChild firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点//parentNode.lastChild lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点console.log(ul.firstChild);console.log(ul.lastChild);//parentNode.firstElementChild 返回第一个子元素节点，找不到则返回null//parentNode.lastElementChild 返回最后一个子元素节点，找不到则返回null//注意这两种方法有兼容性问题，IE9以上才支持。console.log(ul.firstElementChild);console.log(ul.lastElementChild);//好烦呐,实际开发中,firstChild和lastChild包含其他节点,操作不方便,而firstElementChild和lastElementChild又有兼容性问题，那我们如何获取第一个子元素节点或最后一个子元素节点呢？//实际开发的写法：既没有兼容性问题又返回第一个子元素console.log(ul.children[0]);console.log(ul.children[3]);console.log(ul.children[ul.children.length-1]);</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><div>我是div</div><span>我是span</span><script>//兄弟节点//1.node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点var div = document.querySelector('div');console.log(div.nextSibling);//2.node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点var span = document.querySelector('span');console.log(span.previousSibling);//3.node.nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回nullconsole.log(div.nextElementSibling);//4.node.previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null//注意:这两个方法有兼容性问题,IE9以上才支持console.log(span.previousElementSibling);//如何解决兼容性问题？//自己封装一个兼容性的函数function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}</script>
</body></html>创建：document.write element.innerHTML() document.createElement()
区别：document.write()直接内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘(不咋地用)。innerHTML()是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍复杂。createElement()创建多个元素效率低一些，但结构更清晰。
总结：不同浏览器下，innerHTML效率要比createElement高。
增：appendChild insertBefore
<script>//创建节点 document.createElement('tagName') //此方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点//1.创建节点元素节点var li=document.createElement('li');//添加节点 2. node.appendChild(child) node是父级 child是子级 后面追加元素 类似于数组中的push//此方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素var ul=document.querySelector('ul');ul.appendChild(li);//3.node.insertBefore(child,指定元素)//node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素var lili=document.createElement('li');ul.insertBefore(lili,ul.children[0]);//4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素</script>删：removeChild
<body><button>删除</button><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul><script>//node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点var btn = document.querySelector('button');var ul = document.querySelector('ul');btn.onclick = function () {if (ul.children.length == 0) {this.disabled = true;//按钮禁用} else {ul.removeChild(ul.children[0]);//ul.children(获取所有子元素节点)}}</script>
</body>改：主要修改dom的元素属性，dom元素的内容、属性、表单的值等
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.修改元素样式：style、className
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: #7FFFD4;}.change {background-color: aqua;color: #00FFFF;font-size: 25px;margin-top: 100px;}</style>
</head><body><div class="change">文本</div><script>//修改样式属性//通过JS修改元素的大小、颜色、位置等样式//1.element.style 行内样式操作 样式比较少或者功能简单的情况下使用//2.element.className 类名样式操作var div = document.querySelector('div');div.onclick = function () {//div.style里面的属性 采用驼峰命名法this.style.backgroundColor = 'black';this.style.width = '280px';//使用className修改样式属性 样式修改较多，可以采取操作类名方式更改元素样式//当前元素类名改成changethis.className = 'change';}</script>
</body></html>查：主要获取dom的元素
1.DOM提供的API方法：getElementById、getElementsByTagName古老用法不大推荐使用哦
2.H5提供的新方法：querySelector、querySelectorAll 提倡！！！！！！！！
3.利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling） 提倡滴！！！！！！！
属性操作：主要针对于自定义属性
1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移出属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo" index='1' class="nav"></div><script>//1.获取属性值//element.属性 获取属性值var div=document.querySelector('div');console.log(div.id);//element.getAttribute('属性');console.log(div.getAttribute('id'));//区别：element.属性 获取内置属性值（元素本身自带的属性）//element.getAttribute('属性');主要获得自定义的属性（标准）我们程序员自定义的属性console.log(div.getAttribute('index'));console.log(div.index);//果真结果就不明确呢//2.设置属性值//element.属性='值' 设置内置属性值div.id='smallDemo';console.log(div.id);div.className='navs';//element.setAttribute('属性','值');div.setAttribute('index','111');//代码里果然改完了呢div.setAttribute('class','footer');//class特殊//3.移出属性//element.removeAttribute('属性');div.removeAttribute('index');</script></body>
</html>
事件操作：给元素注册事件，采取 事件源.事件类型=事件处理程序
(下一篇详细介绍DOM 事件_xy_is_fhh的博客-CSDN博客）