dom解析结构html,Dom详解
DOM
JavaScript 的组成
组成部分
说明
Ecmascript
描述了该语⾔的语法和基本对象
DOM
描述了处理⽹页内容的⽅法和接⼝
BOM
描述了与浏览器进⾏交互的⽅法和接⼝
DOM(⽂档对象模型)是针对HTML和XML⽂档的⼀个API(应⽤程序编程接⼝)。DOM描绘了⼀个层次化的节点树，允许开发⼈员添加、移除和修改页⾯的某⼀部分。
DOM 以树结构表达 HTML ⽂档。
获取元素
getElementById
根据id属性的值获取元素，返回来的是⼀个元素对象。 还有注意因为js区分⼤⼩写，所以写这个元素不能写错了，否者都得不到正确的结果。
getElementsByTagName
根据标签名字获取元素，返回来的是⼀个伪数组,⾥⾯保存了多个的DOM对象
返回的 HTML集合是动态的, 意味着它可以⾃动更新⾃⼰来保持和 DOM 树的同步⽽不⽤再次调⽤
getElementsByClassName
*ElementsByClassName("类样式的名字")
* 根据选择器获取元素，返回来的是⼀个伪数组*
getElementsByName
根据name属性的值获取元素，返回来的是⼀个伪数组,⾥⾯保存了多个的DOM对象
querySelector
根据选择器获取元素，返回来的是⼀个元素对象
document.querySelector("选择器的名字");
document.querySelector`返回第⼀个匹配的元素，如果没有匹配的元素，则返回 null
语法
var element = document.querySelector(selectors);
注意，由于返回的是第⼀个匹配的元素，这个api使⽤的深度优先搜索来获取元素。
例⼦：
第三级的span
同级的第⼆个div
var element = document.querySelector(".test");
Content);
})
复制代码
两个class都包含“test”的元素，⼀个在⽂档树的前⾯，但是它在第三级，另⼀个在⽂档树的后⾯，但它在第⼀级，通过querySelector获取元素时，它通过深度优先搜索，拿到⽂档树前⾯的第三级的元素。jquery在一个元素后追加标签
querySelectorAll
根据选择器获取元素，返回来的是⼀个伪数组,⾥⾯保存了多个的DOM对象
querySelectorAll()⽅法接受的参数，也是⼀个css选择器，返回的是所有匹配到的元素。返回的是⼀个NodeLIst的实例。
document.querySelectorAll("选择器的名字")
获取和设置属性
getAttribute
setArribute
setAttribute(attribute,value)
getAttribute()和setAttribute()⽅法不属于document对象，所以不能通过document对象调⽤，它只能通过元素节点对象调⽤。
这⾥有⼀个细节：通过setAttribute对⽂档做出修改之后，在通过浏览器查看源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在⽂档本⾝的源代码⾥，这种“表⾥不⼀”的现象源⾃DOM的⼯作模式：先加载⽂档的静态内容，再动态刷新，动态刷新不影响⽂档的静态内容。这正是DOM的真正威⼒：对页⾯的内容进⾏刷新却不需要再浏览器⾥⾯刷新。
Node
childNodes属性
由childNodes属性返回的数组包含所有类型的节点，⽽不仅是元素节点。 事实上，⽂档⾥⼏乎每⼀个东西都是⼀个节点，甚⾄连空格和换⾏都会被解释为节点，⽽他们也包含在childNodes属性返回的数组中.
firstChild和lastChild属性
firstChild 等价于 node.childNodes[0]
nodeType属性
nodeType属性共有12种可取值，但只有3中具有实⽤价值。
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
⽂本节点的nodeType属性值是3
nodeName和nodeValue
nodeName 返回当前节点的节点名称 节点的名字:⼤写的标签--标签,⼩写的属性名---属性,#text---⽂本
nodeValue 返回或设置指定节点的节点值。 标签---null，属性--属性的值,⽂本--⽂本内容
ps: 对于元素节点nodeName 中保存的始终是元素的标签名 ⼤写的标签--标签， nodeValue保存的值始终是NULL
我是p⾥⾯的value
怎获取p标签⾥的⽂本？
document.querySelector("p").childNodes(0).nodeValue
ps: 在编写DOM脚本时，你会理所当然的认为某个节点肯定是⼀个元素节点，这是⼀种相当常见的错误。如果没有100%的把握，就⼀定要检查nodeType属性值。有很多DOM⽅法只能⽤于元素节点，如果⽤在⽂本节点⾝上，就会出错。
元素创建
document.write
document.write("标签的代码及内容");
document.write(‘新设置的内容
标签也可以⽣成
');
document.write()创建元素缺陷：如果是在页⾯加载完毕后，此时通过这种⽅式创建元素，那么页⾯上存在的所有的内容全部被⼲掉
缺点： 违背了“⾏为与表现分离”的原则
document.write("
hhh我是p标签
")
...
innerHTML
及⽀持读取，也⽀持写⼊，它不仅可以⽤来读取HTML内容，还可以⽤它把HTML内容写⼊元素。
对象.innerHTML="标签及代码";
var box = ElementById('box');
box.innerHTML = '新内容
新标签
';
innerHTML 会根据指定的值创建新的DOM树，然后⽤这个DOM树完全替换调⽤元素的所有⼦节点。
createElement和appendChild
//创建元素 这个⽅法只能创建元素节点，这个节点是空⽩的。
//ateElement("标签名字"); 对象 //把元素追加到⽗级元素中
var div = ateElement('div');
document.body.appendChild(div);
createTextNode
创建⽂本节点
insertBefore
在已有元素前插⼊⼀个新元素
parentElement.inserBefore(newElement, targetElement)
(1)新元素: 你想插⼊的元素 (newELement)
(2)⽬标元素：你想把这个新元素插⼊到哪个元素(targetElement)之前
(3)⽗元素：⽬标元素的⽗元素(parentElement)
运⽤dom设置样式
style属性
⽂档中的每⼀个元素都是⼀个对象，每⼀个对象都有各种各样的属性。 每个元素节点都有⼀个style属性。 style属性包含着元素的样式，查询这个属性将返回⼀个对象⽽不是⼀个简单的字符串。样式都存放在这个style对象⾥。
element.style
element.style.fontFamily
当你需要引⽤⼀个中间带减号的css属性时，DOM要求你⽤驼峰命名法。 css属性font-family ⽤fontFamily
element.style.border = "1px solid red"
getComputedStyle()
要确定某个元素的计算样式(包括应⽤给它的所有css规则)，可以⽤这个⽅法
最重要的⼀条是要记住所有计算的样式都只是可读的；不能修改计算后样式对象的css属性。
1: ComputedStyle("元素", "伪类");
这个⽅法接受两个参数：要取得计算样式的元素和⼀个伪元素字符串(例如“:before”) 。如果不需要伪元素信息，第⼆个参数可以是null。也可以通过ComputedStyle(“元素”, “伪类”)；来使⽤
1: var ele = ElementById('ele');
2: var styles = ComputedStyle(ele,null);
3: lor; //获取颜⾊
可以通过style.length来查看浏览器默认样式的个数。IE6-8不⽀持该⽅法，需要使⽤后⾯的⽅法。对于Firefox和Safari，会把颜⾊转换成rgb格式。
相关扩展
innerHTML与innerText
总结：如果使⽤innerText主要是设置⽂本的，设置标签内容，是没有标签的效果的
//总结:innerHTML是可以设置⽂本内容 //
总结:innerHTML主要的作⽤是在标签中设置新的html标签内容，是有标签效果的
//总结：想要设置标签内容，使⽤innerHTML，想要设置⽂本内容,innerText或者textContent，或者innerHTML，推荐⽤innerHTML
//获取的时候: //innerText可以获取标签中间的⽂本内容，但是标签中如果还有标签，那么最⾥⾯的标签的⽂本内容也能获取.---获取不到标签的,⽂本可以获取
//innerHTML才是真正的获取标签中间的所有内容*
结论: //如果想要(获取)标签及内容，使⽤innerHTML //如果想要设置标签，使⽤innerHTML //想要设置⽂本,⽤innerText，或者innerHTML，或者textContent*
ps: innerText 成对的标签都可以⽤这个改变值
获取元素的宽和⾼
，
应该使⽤offset系列来获取
/*
*
* offset系列：获取元素的宽,⾼,left,top, offsetParent
* offsetWidth：元素的宽，有边框
* offsetHeight：元素的⾼，有边框
* offsetLeft：元素距离左边位置的值
* offsetTop：元素距离上⾯位置的值
*
* scroll系列：卷曲出去的值
* scrollLeft：向左卷曲出去的距离
* scrollTop：向上卷曲出去的距离
* scrollWidth：元素中内容的实际的宽(如果内容很少，没有内容，元素⾃⾝的宽)，没有边框
* scrollHeight：元素中内容的实际的⾼(如果内容很少或者没有内容，元素⾃⾝的⾼)，没有边框
*
* client系列：可视区域
* clientWidth：可视区域的宽(没有边框)，边框内部的宽度
* clientHeight：可视区域的⾼(没有边框)，边框内部的⾼度
* clientLeft：左边边框的宽度
*clientTop ：上⾯的边框的宽度
没有脱离⽂档流:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。