js设置dom样式,js设置dom属性

发布时间：2022-11-23

本文目录一览：

  1. js DOM操作
  2. js操作节点的DOM方法
  3. JS之DOM操作
  4. 用js给dom对象设置样式，然后改变样式

js DOM操作

1）一共12个节点类型 2）dom操作就是对节点进行操作 3）节点的类型的获取方法notetype 4）ie9以上及chrome safari firefox 会将换行符当成节点 （1）静态获取 （2）返回带有指定ID的元素

var box1=document.getElementById('box');

（1）根据标签名获取 （2）得到的是个数组

var div1=document.getElementsByTagName('div')[0];

（1）根据类名获取元素 （2）动态获取 （3）得到的是一个数组

var box=document.getElementsByClassName('box')[0];

（1）返回符合要求第一个元素 （2）通过css选择器来获取指定标签 （3）静态获取 （1）返回所有匹配元素 （2）根据css选择器来获取所有标签 （3）得到的是一个数组 获取兄弟节点 获取下一个兄弟标签 获取上一个兄弟节点 获取上一个兄弟标签 获取最后一个子节点 获取最后一个子标签 获取所有非标签类型的子节点 获取所有子标签节点 获取父节点 增加节点

var div=document.createElement('div');

在父元素的末尾，插入节点 在添加元素前，需要将元素先创建好

div.appendChild(div);

修改指定子节点 删除指定子节点 在删除前需要先获取到被删除元素

div.removeChild(box);

删除当前节点 需要先获取到被删除的节点

div.remove();

（1）设置ID

div.id='box';

（2）设置class

div.className='box';

（3）设置style

div.style.width='10px';

（4）设置图片路径

img.src='../';

（5）自定义属性

js操作节点的DOM方法

js操作节点的DOM方法 一、创建节点

  • createElement
  • createTextNode 二、添加、删除、替换、克隆元素
  1. appendChild
  2. insertBefore
  3. 如果 appendChild、insertBefore 追加的是已经存在的子元素，实际上就会将子元素位置移动
  4. 删除节点 remove removeChild
    • remove()
    • removeChild
  5. 替换节点
    • replaceChild
  6. 克隆节点
    • cloneNode() 三、操作元素属性的方法
  7. 获取属性 元素.属性名
  8. 设置属性 元素.属性名 = 属性值
    • 1、2方法只能获取和设置元素自带的属性
  9. 操作属性的万能方法
    • getAttribute()
    • setAttribute()

JS之DOM操作

DOM： Document Object Model，文档对象模型；js提供了丰富的api来操作文档内容。 DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body 节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。 可以通过 nodeType 查看节点类型 ： 1元素节点、3文本节点 特殊的元素节点：

  1. html元素
  2. body元素
  3. head元素 节点操作的api（属性和方法）
  4. nodeName：只读属性，可以读取节点名称
  5. nodeType：只读属性，读取节点类型
  6. hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。
  7. childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法
  8. firstChild：获得节点的第一个子节点
  9. lastChild：获得节点的最后一个子节点
  10. querySelector()：
    • 参数：string类型，css选择器
    • 作用：获得文档中第一个符合选择器条件的节点
    • 兼容：在IE9以下不支持
  11. querySelectorAll()：
    • 参数：string类型，css选择器
    • 作用：获得文档中所有符合选择器条件的节点集合（类数组结构）
    • 兼容：在IE9以下不支持 注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。
  12. previousSibling：获取节点的前一个兄弟节点
  13. nextSibling：获取节点的后一个兄弟节点
  14. parentNode：获得节点的父节点（父节点一定是元素节点）
  15. removeChild()：节点删除它的指定子节点
    DOM操作元素：暂时不用的隐藏、一定不用的删除。
  16. cloneNode()：克隆一个节点
  • 参数：boolean类型，true深克隆，false浅克隆，默认浅克隆
  • 深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点
  • 浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点
  1. a.replaceChild(b,c)：用b替换c
  • 其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。
  1. a.replaceWith(b)：用b替换a
  • a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。
  1. a.insertBefore(b,c)：在c前面插入b
  • 其中，a是c的父节点，c是已经存在的节点，b是新节点
  1. a.appendChild(b)：在a末尾追加b
  • a是父节点，b是a的子节点, c是子节点 元素节点的相关api
  1. getElementsByTagName()：根据标签名获得元素集合（类数组结构）
    • 区别：HTMLCollection 是动态集合，NodeList 是静态集合。
  2. createElement()：根据标签名创建新元素
  3. id：读写属性，可以读取或设置元素的id值
  4. className：读写属性，可以读取或设置元素的class值
  5. classList：读取标签的类名集合（类数组结构）
    • add()：为元素新增类名，如果类名已存在不会重复添加
    • remove()：删除元素指定类名，如果类名不存在不会执行操作 元素的属性分为两类： 一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过.语法读取或设置。 再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过.语法读取，需要通过操作方法访问。
  6. setAttribute(name,value)
    • 参数：name表示要设置的属性名，value要为属性设置的值
    • 无返回值
  7. getAttribute(name)
    • 参数：name表示要读取的属性名
    • 返回值：返回属性的值，如果属性不存在会返回null
  8. removeAttribute(name)
    • 参数：name表示要删除的属性名
    • 无返回值 说明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。 element拓展： 兼容：以下属性、方法在IE9以下不支持。
  9. children：读取元素的所有元素子节点集合（类数组）
  10. parentElement：读取元素的父元素节点
  11. previousElementSibling：读取前一个元素兄弟节点
  12. nextElementSibling：读取后一个元素兄弟节点
  13. firstElementChild：读取第一个元素子节点
  14. lastElementChild：读取最后一个元素子节点
  15. remove()：将调用方法的元素从DOM结构中删除

用js给dom对象设置样式，然后改变样式

<script type="text/javascript">
var obj = document.getElementById(id);
function style(obj){
obj.style = "font-size:30px;background:teal;height:900px";
obj.style = "font-size:100px;opacity:.67;width:100px";
}
style(obj);
</script>
推荐文章