JS - 笔记2-2_4_DOM - 《学习笔记》

DOM

文档对象模型（DocumentObjectModel）
W3C的，独立于平台和语言的一套标准(XML)(不一定在html使用)
DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。

DOM树
可以将任何的HTML文档描绘成由多个层次的节点构成的结构。
浏览器接收到H5代码，解析成一个DOM树,根据页面上的标签建立起来一个树形结构,或是对象;树上得节点就是页面上的属性以及标签。
document是一个根节点
DOM树的节点种类
HTML中的节点种类有10多种，常用的有以下三种:

元素节点：页面中的标签，div ul span…
属性节点：标签的属性，id class name type style
文本节点：例如:
hello
hello就是一个文本节点
注释也是一种节点
DOM树节点的相关属性
nodeType、nodeName、nodeValue
nodeType值决定了nodeName，nodeValue值：

元素节点(nodeType === 1)

nodeName = 元素Tag名(DIV)
nodeValue = null

属性节点(nodeType ===2)

nodeName = 属性名称(id,type)
nodeValue = 属性值

文本节点(nodeType === 3)

nodeName = #text
nodeValue = 文本内容

空文本节点：

childNodes
通过childNodes，可以取得一个节点下的所有子节点。
通过childNodes，取得的节点中，包含文本和空文本节点 ```html /chrome、FF、IE11动作一致 IE8中、元素包含
时，无空文本节点，元素包含时，有空文本节点。通常我们只处理元素节点/

var ul = document.getElementsByTagName(‘ul’) var nodes = ul[0].childNodes; console.log(nodes.length); // 7, 4个换行，3个标签

<a name="eMmrf"></a>
##### children
1. 取得一个元素的子元素节点
2. 这里的以及上面的子节点都只是儿子节点不包括孙子节点等
```javascript
var node = ul[0].children;
console.log(node.length); //3
console.log(node[2]); //<a href></a>

从DOM树上获取元素节点:

1. document.getElementById( id名 )

2. xxx.getElementsByTagName( 标签名 )

xxx可以是document，也可以是某个元素节点
取得的是xxx以内的指定标签名的所有元素

3. xxx.getElementsByClassName( class名 )

4. xxx.getElementsByName()

只有input默认有name属性
但H5支持自定标签、属性！！！！

5. xxx.querySelector()

通过选择器选择元素，只能取到被选中元素的第一个

6. xxx.querySelectorAll()

通过选择器，取到所有匹配的元素

！！！以上所有除了1，5返回的都是数组
所有的参数都是字符串
参数为’*’,表示所有

DOM节点的方法和属性:

取到的每一个节点就是一个对象；其属性和方法如下：

1.el.setAttribute(属性名, 属性值)

var ul =document.getElementsByTagName('ul')
var list =ul[0].querySelector('li') //ul[0]为一个元素节点，就是上述的xxx，一定要取出来才能用
list.setAttribute('class','add')

2.el.getAttribute(属性名)

<li style="height:100px"><a href=""></a></li>
<script>
  var ul =document.getElementsByTagName('ul')
  var list =ul[0].querySelector('li')
  console.log(list.getAttribute('style')) 
  //height:100px; 这里取到的只能是style的行间样式，css中的不行
</script>

3.el.removeAttribute(属性名)

list.removeAttribute('style')

4.获取属性

<div id="box"class="add"style="width:100px;height:100px;background:blue">我是一个div</div>
var div = document.querySelector('div')
console.log(div.id); //box
console.log(div.className); //add
console.log(div.tagName); //DIV
console.log(div.style); // 整个style属性包括默认的写上的
console.log(div.style.width) //100px
console.log(div.style.background) //blue
console.log(div.innerHTML); //我是一个div
console.log(div.outerHTML); //整个div；<div id="box" class="add" style="width:100px;height:100px;background:blue">我是一个div</div>

5.修改属性

div.id ='box1';
div.className='block'
div.tagName ='p'//修改无效
div.style.position ='absolute'
div. border = '3px solid red'
div.style.borderRadius='5px'

原来没有的属性写上就等于是添加上了属性

6.删除属性

div.style.background='';

笔记2-2_4_DOM

DOM

DOM树

DOM树的节点种类

DOM树节点的相关属性

nodeType、nodeName、nodeValue

childNodes