DOM基本操作（下）

核心DOM：不带HTML开头的类型中定义的属性和方法
HTML DOM：在带HTML开头的类型中定义的属性和方法

	元素：-->HTMLXXXElement的原型
               -->HTMLElement的原型——所有HTML元素的父类型
          以上是HTML DOM，以下是核心DOM
			-->Element的原型——所有元素的父类型
            -->Node的原型——所有节点的父类型

一切从属性获取的值和设置到属性上的值必须都是字符串
所以，都要先类型转换，再计算

获取元素的属性值：4种：
1. var strValue=elem.getAttribute(“属性名”);
何时使用：只找一个属性值时
2. elem.attributes集合：包含了当前元素所有属性的节点对象
elem.attributes[i/“属性名”]–>返回一个属性节点对象
elem.attributes[i/“属性名”].value–>属性值
何时使用：遍历一个元素所有属性时
3. elem.getAttributeNode(“属性名”)–>返回一个属性节点 elem.getAttributeNode(“属性名”).value–>返回属性值

修改元素的属性值：2种：
1. elem.setAttribute(“属性名”,“属性值”);
何时使用：只设置一个属性值时
2. elem.setAttributeNode(属性节点对象)

移除元素的属性：2种：
1. elem.removeAttribute(“属性名”)
2. elem.removeAttributeNode(属性节点)

判断是否包含指定属性：1种：
1. elem.hasAttribute(“属性名”)–>有，true；没有，false

节点四个属性

nodeName 元素的标签名大写只读不能写获得当前节点的名称

nodeValue 元素的文本内容 text节点和comment节点起作用可读写对元素节点无效 :如果是元素节点：返回null

nodeType 节点类型返回的是一个数字
ELEMENT_NODE: 1;
TEXT_NODE: 3;
ATTRIBUTE_NODE: 2;
DOCUMENT_NODE: 9

attributes 节点的属性集合类数组

查找元素节点

1.按HTML属性查找

var ele = document.getElementById('id值');
var eles = document.getElementsByTagName('标签名');//无兼容问题，可查找直接子元素，也可查找所有的子代元素（HTMLCollection）动态集合
var eles = document.getElementsByClassName('类名');//IE8及以下不兼容
var eles = document.getElementsByName('name属性');//旧浏览器只有部分标签才可使用
//getElementsXXX 返回的是（HTMLCollection）动态集合，可循环长度

2.Selector API
利用css选择器查找任意元素的方法【jquery的核心】，有实时性问题

var ele = document.querySelector(‘选择器’);//只需返回第一个匹配的元素对象，只能查找一个是使用
var eles = document.querySelectorAll(‘选择器’);//返回所有符合选择器的元素对象（包括完整对象属性的集合）【非动态集合】

querySelector ()的缺点：

querySelector ()所得结果不是实时的，所以当我们动态地添加一个匹配该选择器的元素的时候，元素集合不会更新；

 var div1 = document.querySelector('div');
 var div2 = document.getElementsByTagName('div');
 var newEle = document.createElement('div');
 document.body.appendChild(newEle);
 div1.length === div2.length; //false

querySelectorAll () 的缺点：
1.其结果集不能调用Node方法上获得元素，要用for遍历解决；
2.返回的结果是一个NodeList，不是数组。
使用它的元素时要将其结果集转为数组，或者从Array原型上借用方法

   Selector API vs getElementxxx
   效率：getElementxxx效率最高
   易用：Selector API更容易使用，便于反复查找
   如果只找一次就可获得元素时，用getElementxxx
   如果需要反复查找才能获得元素时，用 Selector API

创建和删除节点：——核心DOM

创建单个节点：3步：
1. 创建空节点对象：
  var elem=document.createElement(“标签名”);
2. 设置关键属性：(可选)
  比如：a.href=“http://baidu.com”;
  a.innerHTML=“go to baidu”;
  go to baidu
3. 将新节点挂到指定父元素下：3种
  追加: parent.appendChild(elem); elem–>lastChild
  插入: parent.insertBefore(elem,oldElem);
  替换: parent.replaceChild(elem,oldElem);
减少修改DOM树（第3步）的次数，可减少排版引擎渲染页面的次数，可提高执行效率。
解决：将所有子元素都添加到父元素下后，再将父元素一次性加入页面。
添加多个平级子元素：3步：
1.先创建一个文档片段：
文档片段：内存中临时保存多个节点对象的空间
内存中一个临时的父元素
var frag=document.createDocumentFragment();

2.将创建的子元素，先加入到片段中: frag用法同普通父元素
frag.appendChild(newElem);
frag.insertBefore(xxx,xxx);
frag.replaceChild(xxx,xxx);
1. 将文档片段作为整体，添加到页面制定父元素下
  片段不出现在DOM树中，也不会出现在页面上
删除节点：
var 子节点对象=parent.removeChild(子节点对象);
var 子节点=子节点.parentNode.removeChild(子节点);
检测是否有节点
hasChildNodes()

不难呐

发布了25 篇原创文章 · 获赞 1 · 访问量 618

私信关注

DOM基本操作（下）

猜你喜欢