[JavaScript]DOMAPI

• sgsgdwgdg

  sgsgdwgdg

  sgsgdwgdg

  sgdgs

  sgdgs

  sgdgs

  对象属性和标签属性概念的区分

  对象属性是指使用js获取到标签对象后，再使用对象.属性得到的值，而标签属性则是获取的我们在标签属性那里原原本本写的东西

  我们使用getAttribute方法来演示这个区别，getAttribute方法会将我们在标签属性里写的东西以字符串的形式返回，而如果使用对象.属性的方法，那么得到的就是标签属性的值

  注意：

  1.如果这里使用的是自定义的标签属性，不是标签自有的属性，那么getAttribute方法仍然能够拿到值，但是以对象.属性方式就无法拿到，值是undefind

  2.setAttribute方法，设置标签属性，这里要注意，如果我们以对象.属性的方法来设置一个属性的值，是在这个属性的结果值上进行设置的，而setAttribute方法则是相当于直接在标签上重写的情况。如设置标签的width属性，如果以对象.width = "100px"是不正确的，这样就相当于将width属性的值设置成100px，肯定会报错的，以对象.setAttribute(“width”,“100px”)方法就相当于在标签上将<p width="100px"></p>所以是正确的

  示例：

  

  判断某一个属性是否有某属性

  我们可以使用hasAttribute()方法来判断节点对象是否有某个属性，这里就算是自定义属性也是可以判断的

  示例：

  oImg.hasAttribute(“width”);//返回true

  oImg.hasAttribute(“height”);//返回true

  oImg.hasAttribute(“zidinyi”);//如果没有在标签里写这个属性，则返回false，否则返回true

  DOM节点对象的属性

  DOM的每个节点对象都有一系列属性，用于存储该节点的状态和信息

  element.title //设置或返回元素的title属性

  element.textContent //设置或返回一个节点和它的文本内容

  element.innerText //设置或返回一个节点和它的文本内容

  p标签

  var op = document.querySelector(“p”);

  console.log(op.textContent);

  console.log(op.innerText);

  //这两个输出的都是p标签中的文字内容

  标题内容

  div内容

  var oP = querySelector(“#wrap”);

  //获取元素内的文本内容，但是会过滤掉标签，打印的文本不包括

  这样的标签

  console.log(oP.textContent);

  console,log(oP.innerText);

  //获取元素内的所有内容，包括标签

  console.log(oP.innerHTML);

  //可以获取到oP这个对象内部的标签对象，打印的是

  标题内容

  element.tagName //作为一个字符串返回某个元素的标记名（大写）

  element.className //获取标签的class属性值

  最后

  为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。