DOM(document Object model)文档对象模型 - 《JavaScript》

set/getAttribute() 修改/获取 removeAttrite() 移除
删除空白节点
ownerDocument 属性
parentNode previousSibling nextSlibing
attribute
createElement
appendChild
createTextNode()
insertbefore
replaceChild()
cloneChild()
removeChild()

【注】”W3C”文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式

html css 页面内容
js 页面行为操作
【DOM】是打通html、css、js壁垒的一个工具
DOM中节点一共有三种
【注】在JS中所有节点都是对象

测试Div

元素节点：

属性节点: title = ‘属性节点’
文本节点：测试Div

document.getElementById()

【功能】通过当前元素节点的ID，获取对应元素节点
元素节点属性：
通过这个节点属性，访问他的一系列属性
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签内的内容解析标签

HTML属性的属性
id
title
style
className

var div = document.getElementById('div')
alert(div.tagName)
alert(div.title)
alert(div.innerHTML)

在style样式中，background-color 使用’-‘链接的属性访问的时候，要将’-‘去掉，然后将后续首字母大写

document.getElementsByTagName(‘’)

node.getElementsByTagName(‘’)
【注】从node节点开始，找出所有符合条件的元素节点
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点
返回值：一个装有符合条件的元素节点的数组

var li = document.getElementsByTagName('li')//获取所有li标签
alert(li.length)
var ul = document.getElementsByTagName('ul')
var li = ul.getElementsByTagName('li')//获取ul里面所有的li标签
for(var i=0;i<li.length;i++){//遍历当前这个数组
    alert(li[i]);
}

document.getElementsByName(‘’)

参数：name的值
返回值：装有符合条件的元素节点的数组
【注】name属性一般只有文本输入框的元素节点才有

//var name = document.getElementsByName('hello')//获取name为hello的所有元素
var div = document.getElementsById('div')
var name = div.getElementsByName('hello')//获取div中所有name为hello的元素
alert(name.length)

document.getElementsByClassName(‘’)

功能：获取在某个节点中，所有符合条件的元素节点
参数： class
返回值：所有符合条件的元素节点组成的数组
【注】getElementsByCLassName 在低IE版本中不支持

//var className = document.getElementsByClassName('hello')//获取所有class为hello的元素节点
var ul = document.getElementById('ul')
var className = ul.getElementsByClassName('hello')//获取ul下所有class为hello的元素节点
for( var i=0;i<className.length;i++){//遍历当前这个数组
    alert(className[i].innerHTML)
}

封装函数，封装一个兼容ie的方法

var elementByClassName = function( parent,classStr) {
//<1>找到parent下所有的元素节点
  var node = parent.getElementsByCLassName('*');
  var results = [];//用来记录符合条件的元素节点
  for (var i = 0; i < node.length; i++ ) {
      if(node[i].ClassName == classStr){//遍历当前这个数组，找到class Name与classStr相等的元素
        results.push(node[i]);//符合的添加到数组中
    }
    return results;
  }
}

set/getAttribute() 修改/获取 removeAttrite() 移除

【注】都是操作当前元素节点中某个属性的

var div = document.getElementById('div')
alert(div.title)
alert(div.className)
div.title = 'xxx'
div.className = 'box'
div.setAttribute('title','xxx')//修改当前div的title为xxx

上述两种方式的区别

class属性范围区别，.操作是通过从className，而set/getAttribute是通过class
set/getAttribute是用户自定义属性支持
removeAttrite ```javascript

var div = document.getElementsTagName(‘div’) alert(div.getAttribute(‘class’))//获取div的class为box alert(div.setAttribute(‘class’,’box1’))//设置div的class为box1

alert(div.removeAttrite(‘border’))

<a name="1h0iJ"></a>
### childNodes
获取当前元素节点的所有子节点  为一个数组<br />【注】节点可以分为元素节点、属性节点、文本节点，而这些节点又有三个非常有用的属性，分别为： nodeName、nodeType 和 nodeValue
```javascript
<div><li></li><li></li><span></span></div>
var div = document.getElementsByTagName('div')
alert(div.childNodes[0])//输出第一个li（即这个数组里下标为0的元素）

删除空白节点

包括回车换行 tab键空格都是字符
【问题】如何将空白节点取出
【注】识别出空白节点

/^\s+$/.test()
使用左侧的正则去进行验证，如果是空白节点，返回true，否则返回false

//删除空白节点 
var removeSpaceNode = function(nodes) {
  var result = [];//用来存放不是空白节点的节点
  for( var 1 = 0;i < nodes.length; i++){
  //判断是否为空白节点
    if( nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
        contiune;
    }
    result.push(node[i])
  }
  return result
}

ownerDocument 属性

【注】ownerDocuemnt
属性返回该节点的文档对象根节点，返回的对象相当于document

var div = document.getElemnetsByTagName('div')
alert(div.ownerDocument == document)//返回true

parentNode previousSibling nextSlibing

parentNode 返回该节点的父节点
previouSlbling 返回该节点的前一个同级节点
nextSlibing 返回该节点的后一个同级节点

<div>
  <ul></ul>
    <li></li>
    <span></span>
</div>
var li = document.getElementsByTagName('li')
alert(li.parentNode)//输出li的父节点，为div
alert(li.previouSlbling)//输出li的前面一个同级节点为ul
alert(li.nextSlibing)//输出li的后见一个同级节点为span

attribute

属性节点
attribute属性返回该节点的属性节点【集合】
集合特点：1. 不重复 2. 无序
attributes.length 返回属性节点个数

var li = document.getElementsByTagName('li')
alert(li.attributes.length)
//访问其中一个节点
alert(li.attributes.getNameItem('id'))
属性节点
    nodeName   nodeType  nodeValue
  属性名                类型2            值
  alert(li.attributes.getNameItem('id').nodeName)
  alert(li.attributes.getNameItem('id').nodeType)
  alert(li.attributes.getNameItem('id').nodeValue)

createElement

createElement() 方法通过指定名称创建一个元素
【格式】document.createElement(标签名)

var div = document.getElementByTagName('div')
var btn = document.getElementById('btn')
btn.onclick = function() {
    var newNode = createElement('span')
  div.appendChild('newNode')
}

appendChild

【格式】parent.appendChild(newNode)
功能：将newNode插入到parent子节点的末尾

var div = document.getElementByTagName('div')
var btn = document.getElementById('btn')
btn.onclick = function() {
    var newNode = createElement('span')
  div.appendChild('newNode')
}

createTextNode()

【格式】document.createTextNode(‘文本’)
功能：创建文本节点

var div = document.getElementByTagName('div')
var btn = document.getElementById('btn')
btn.onclick = function() {
    var newNode = createElement('span')
  var addText = createElement('文本内容')
  node.appendChild('addText')
  div.appendChild('newNode')
}

直接创建一个带文本的元素节点（封装函数）

var createElementWithTxt = function(tagName,Txt) {
    var node = document.createElement(tagName)
  var txt = document.createTxtNode(Txt)
  node.appendChild(txt)
  return node
}

insertbefore

【格式】父节点.insertbefore(插入的节点，旧节点)
功能：将要插入的节点插入到旧节点之前

var node = createElementWithTxt('strong','文本')
var span = document.getElementByTagName('span')[0]
span.parentNode.insertbefore(node,span)//将node节点插入到span之前

封装一个insertafter()方法

var insertAfter = function( newNode,oldNode) {
    //判断oldNode是否为最后一个节点
  var parent = oldNode.parentNode
  if(oldNode == parent.lastChild){//直接插入到子节点的末尾
      parent.appendChild(newNode);
  }else{
    //插入到oldNode节点的下一个节点之前
      parent.insertbefore(newNode,oldNode.nextSibling)
  }
}

replaceChild()

【格式】parentNode.replaceChild(newNode,oldNode)
功能：用newNode将oldNode替换

var span = document.getElementsByTagName('span')
var newNode = document.createElement('strong')
span.parentNode.replaceChild(newNode,span)

cloneChild()

【格式】Node.cloneChild()
功能：克隆节点
返回值：新克隆出来的节点
参数： true 默认是false 如果穿true，则会复制元素节点中的inner HTML

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span');
var newNOde = span.cloneChild(true);
span.parentNode.insertbefore(newNOde,span);

removeChild()

【格式】node.parentNode.removeChild(node)
功能：删除节点

var div = document.getElementsByTagName('div')[0];
var btn = document.getElementsById('btn')
var span = document.getElementsByTagName('span');
btn.onclick = function() {
    span.parentNode.removeChild(span)//删除span节点
}