DOM知识点总结(一)

最新推荐文章于 2022-06-29 19:30:01 发布

jennyya

最新推荐文章于 2022-06-29 19:30:01 发布

阅读量235

点赞数

分类专栏： js 文章标签： DOM

本文链接：https://blog.csdn.net/jennyya/article/details/83869166

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

Document Object Model 文档对象模型符合w3c标准

1、DOM节点类型有两种

元素:标签
文本

2、DOM的基本操作

  查询 		 document.getElementById("box")		//ID获取    表示的是一个对象
        	 document.getElementsByClassName()[0]  //类名获取
           	 document.getElementsByName()[0]       //name属性
       		 document.getElementsByTagName() [0]  //标签名
			 除了通过Id获取的得到的是对象，其他得到的都是数组，需要通过加索引找到对象。
			 通过Id、TagName获取在ie浏览器中不会出现兼容性问题。其他的在ie8一下会出现兼容问题

			 document.querySelector()
			 document.querySelectorAll()
			 通常使用querySelector() 通过Id取值推荐这个
			 querySelectorAll() 通过class 标签名 属性或者推荐这个
创建节点： 	 document.createElement("")
创建文本节点：document.createTextNode("hello")
添加 		 document.appendChild();
			 insertBefore()
修改		 c.replaceChild("a","b")  注意c是 a和b共同的父节点时a标签才可以替换b标签。
删除		 document.removeChild()

3、获取非行内样式

1、getComputedStyle()函数 
  <style>
       #box{
           width: 100px;
           height: 100px;
           border: 1px solid black;
       }
    </style>
<div id="box" style="background:red">1111</div>
var box =document.getElementById("box")
var width=getComputedStyle(box,null)["width"];   // 100px
var width=getComputedStyle(box,null)["background:red"];  //red

**Ie8需要使用如下的方法**
var width=box.currentStyle["width"]

4封装一个获取一个非行样式的函数

1、function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
      return  getComputedStyle(obj,null)[attr] 
}
currentStyle在非Ie中返回值是undefined  在Ie中返回的是一个对象


2、function getStyle(obj,attr){
      if(window.getComputedStyle){
        return  getComputedStyle(obj,null)[attr] 
      }
      return obj.currentStyle[attr];
}