7. JavaScript学习笔记——DOM

前端开发作者： 2024-08-26 01:15:01

7. DOM 7.1 DOM简介 DOM是文档对象模型，HTML文档的所有内容都是节点：整个文档是一个文档节点 (document 最顶级) HTML元素内的文本是文本节点每个表面的属性是属性节点

7. DOM

文档 document

根元素 html

元素 head

元素 body

元素 title

文本节点

元素 a

属性节点 href

///【通过ID选取】
  var div = document.getELementById('id');//返回带有【一个】指定ID的元素节点对象(PS:一个页面只允许一个id，表示唯一性)
  alert(div);          //Object HTMLDivElement
  alert(div.tagName);  //获取这个元素节点的标签名
  
  //当想要通过ID查找多个元素时，下面呢的getElements()函数很有用：
  function getElements(/*ids...*/){                  //接收任意多个字符串参数(id)
      var elements = {};                             //用于保存元素对象的空map映射对象
      for(var i = 0; i < arguments.length; i++){     //遍历每个id
          var id = arguments[i];
          var elt = document.getElementById(id);
          if(elt == null)
              throw new Error("No element with id: " + id); //如果id不存在，抛出异常，退出
          elements[id] = elt;                        //保存idd和元素之间的映射
      }
      return elements;
  }
  
  
  
  ///【通过name选取元素】
  // name属性用于向服务器提交数据，不唯一，多个元素可能具有同一个name；在表单中，单选、复选框通常是这种情况。和id不一样，name属性只在少数几个HTML元素中有效，包括：表单、表单元素、img、iframe
  var h1 = document.getELementsByName('h1');  //返回 NodeList 对象，类似一个包含若干Element对象的只读数组
  alert(h1.length);   //获取长度
  alert(h1[0]);       //访问第一个h1
  
  
  
  ///【通过标签名选取】
  var h1 = document.getELementsByTagName('h1'); //返回 NodeList 对象，对于标签名不区分大小写
  
  // NodeList中返回的元素是按照在文档中的顺序排序的，所以可以用下面的代码选取文档中第一个p元素
  var firstPara = document.getElementsByTagName("p")[0];
  
  // 给 getELementsByTagName() 传递通配符参数 * ，将获得一个代表文档所有元素的 NodeList 对象
  // Element 类也定义了 getElementsByTagName() 方法，原理和Document版本一样，只是它只选取调用该方法的元素的后代元素
  
  
  
  ///【通过 class 选取】
  var cla1 = document.getELementsByClassName('cla1'); //选取 class 属性值中包含 cla1 的元素
  var ab = document.getElementsByClassName('cla1 cla2'); //选取有 cla1 和 cla2 类的元素
  
  
  
  //【根据CSS选择器查找】
  document.querySelector('#nav'); //接收一个CSS选择器，返回子节点【第一个匹配到的元素】，没有返回null
  
  div.querySelector('p');//上面是文档搜索，这个是在 div 下的子节点搜索
  
  document.querySelectorAll('body');//返回所有符合的结果，NodeList
  
  
  
  
  //***** DOM扩展  (不是HTML5规范，但都可以用) ******
  //滚动
  var p = document.getElementById('p');
  p.scrollIntoView();//滚动到 ID 为p 的标签，类似于锚点

///【节点(node)属性】
alert(node.nodeName);//获取元素节点标签名，和tagName等价；属性节点名；文本节点是#text
alert(node.nodeType);//获取元素节点类型 1；属性节点类型 2；文本节点类型 3；
alert(node.nodeValue);//获取元素节点为null；获取属性节点的属性值；获取文本节点的文本内容
alert(node.innerHTML);//只能获取元素节点的文本内容(两个标签间的所有内容)，无法获取文本节点内容

a.href = 'http://test.cc';  //可以直接访问、修改元素的原生属性
alert(div.className);      //通过className获取class属性的值，不用class，因为是保留字

// 【可以设置、读取 元素的非标准属性】
alert(div.getAttribute('xxx'));   //获取自定义和自有的属性，可以用class
div.setAttribute('属性名','值');  //设置属性值
div.removeAttribute('属性名');   //删除属性名
div.hasAttribute('属性名');      //判断是否有某个属性，判断布尔值属性(disabled)很有用

//【数据集属性】
// 想要给HTML元素绑定额外的信息，可以用getAttribute() setAttribute()方法来读写非标准属性的值。HTML5 提供了一个解决方案，在HTML5 中任意以“data-”为前缀的小写属性都是合法的 数据集属性。
// HTML5在Element对象上定义了dataset属性，该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性，如：dataset.xy 保存着 data-xy的属性的值；data-后的属性名如果有 - ，改成驼峰命名法




///【层次节点属性】
// childNodes 属性
// <node>haha <b>xxx</b> end</node>
alert(node.childNodes);//返回 NodeList 对象，当前元素节点的所有子节点列表
alert(node.childNodes.length);//返回 NodeList 的长度，3
alert(node.childNodes[0]);//返回第一个子节点，文本节点(Object Text) haha 
node.childNodes[0].nodeValue = '<b>xxx</b>';//可以赋值，标签会被转义成实体，innerHTML不会

//firstChild lastChild removeChild
alert(node.firstChild);//返回第一个子节点（文本和元素节点）
alert(node.lastChild.nodeValue);//返回最后一个子节点 end
node.removeChild(node[0])//移除子节点

//firstElementChild  lastElementChild  childElementCount
alert(node.firstElementChild);//返回第一个【元素节点】
alert(node.lastElementChild);//返回最后一个【元素节点】
alert(node.childElementCount);//返回元素节点数量

//parentNode previousSibling nextSibling
alert(node.parentNode);//返回父节点
alert(node.previousSibling);//返回本节点上一个节点（文本节点和元素节点）
alert(node.nextSibiling);//返回本节点的下一个节点

//nextElementSibling    previousElementSibling    parentNode
alert(node.nextElementSibling);//返回下一个【元素节点】


//attributes 属性
alert(node.attributes);//返回 object NamedNodeMap，这个元素节点的属性结合
alert(node.attributes.length);//返回属性集合长度
alert(node.attributes[0]);//返回一个属节点
alert(node.attributes['id']);//通过属性名访问
node.attributes['id']='test';//修改属性




//移除空白节点
//当两个标签里含有空格或换行符时会被当做空白的文本节点
function removeWhiteNodes(node){
    for(var i=0; i<node.childNodes.length; i++){
        if(node.childNodes[i].nodeType==3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
            node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
            //childNodes[i].remove();
        }
    }
    return node;
}




//*****DOM扩展 (不是HTML5规范，但都可以用) *****
// children 属性 【解决空白节点的问题】
// 返回节点的所有子元素节点，只返回子节点中的元素节点
/*
<div id='div'>
    111
    <p>haha</p>
	<p>enen</p>
	222
</div>
*/
alert(document.getElementById('div').children.length);//2
alert(document.getElementById('div').children[0]);//返回第一个 p元素节点HTMLParagraphElement



//contains()方法
//判断一个节点是不是另一个节点的子节点
alert(div.contains(p));//true

//createElement  createTextNode  appendChild
var div = document.getElementById('div');
var p = document.createElement('p');//创建一个元素节点，没有添加到文档，只是驻留在内存里
var text = document.createTextNode('ppppp');//创建一个文本节点
p.appendChild(text);
div.appendChild(p);//将节点添加到子节点末尾


//insertBefore()
node.insertBefore(newItem[,existingItem]);//在node 的子节点existingItem前插入一个newItem
//JavaScript没有提供insertAfter
function insertAfter(newItem,targetItem){
    var parent = targetItem.parentNode;
    if(targetItem == parent.lastChild){
        parent.appendChild(newItem);
    }else{
        parent.insertBefore(newItem,targetItem.nextSibling);
    }
}


//replaceChild    removeChild    cloneNode   remove
node.replaceChild(newItem,oldItem);//替换子节点，【注意新节点在前】
node.removeChild(node[1])//移除子节点
var clone = node.cloneNode(true);//克隆一个节点，true表示包括所有子节点，false不包括
node.remove();//删除自身




//***** DOM扩展 - 插入 *****
/*
虽然 DOM 为操作节点提供了细致入微的控制手段，但在需要给文档插入大量新 HTML 标记的情况下，通过 DOM 操作仍然非常麻烦，因为不仅要创建一系列 DOM 节点，而且还要小心地按照正确的顺序把它们连接起来。相对而言，使用插入标记的技术，直接插入 HTML 字符串不仅更简单，速度也更快。以下与插入标记相关的 DOM 扩展已经纳入了 HTML5 规范。
*/

//innerHTML属性  (是HTML5规范)
//在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）字符串。在写模式下，innerHTML 会根据字符串创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
//插入 script 标签并不会执行里面的JS代码

//innerTEXT属性  (不是HTML5规范)
//返回子节点中所有文本节点的字符串，即去除所有标签
/*
<div>
	aaa
	<p>bbb</p>
	haha
*/
alert(div.innerTEXT);//aaa  bbb  haha


//outerHTML属性  (是HTML5规范)
//在读模式下， outerHTML 返回调用它的元素及所有子节点的 HTML 标签。 在写模式下， outerHTML会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素
//和innerHTML 类似，只不过操作包括了当前节点


//outerTEXT属性 （不是HTML5规范）
//同上，包括了当前节点

7.5.1 访问元素的样式

//-----只要取得一个有效的 DOM 元素的引用，就可以随时使用 JavaScript 为其设置样式（但是float是JavaScript保留字，所以不能直接使用CSS属性float，改成cssFloat
//-----例如：
var div = document.getElementById('div');
div.style.backgroundColor = 'red';//设置背景颜色
div.style.width = '100px';
div.style.height = '200px';//改变大小
div.style.border = '1px solid black';//设置边框

//-----通过 style 对象同样可以取得在 style 特性中指定的样式，只能是获得行内的(style属性)
alert(div.style.backgroundColor);
alert(div.style.width);



//-----【DOM 样式属性和方法】
//style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style特性值的同时，【也可以修改样式】。
style.cssText  //获得style属性的CSS代码
style.length  //获得CSS属性的数量
styl.e.parentRule  //CSS信息的CSSRule对象
style.getPropertyValue(属性名); //返回给定属性的字符串值
style.removeProperty(属性名); //从样式中删除指定属性
style.setProperty(属性名，值); //设置属性
style.item(index); //返回指定索引的CSS属性名


///【操作样式表】