JS dom基础二 操作节点属性+操作元素样式+动态增删节点篇

DOM基础续

操作元素节点的属性

• 通过点语法操作元素的属性 元素.style 元素.src 元素.value 元素.href

  通过点语法操作元素的属性, 这种写法是兼备读写性的

• 点语法操作元素的属性存在的问题:

  1. 需要分别到底是读还是写, 因为读写的语法是一样的;
  2. 有些属性获得值与设置的值不一致. e.g: 元素的src属性;
  3. 我们在设置属性时, 如果属性名没办法直接通过点语法写出来, 而是间接获取的; 或者需要的属性名是一个字符串. 这些情况都无法使用点语法操作属性.

• setAttribute(“属性名”, “属性值”) 设置元素的属性值

• getAttribute(“属性名”) 获取元素的属性值

  //	img1.src = "../Day08/img/1.png";
  //	console.log(img1.src);
  
  //	img1.setAttribute("src", "../Day08/img/2.jpeg");
  //	console.log(img1.getAttribute("src"));
  
  

  <input type="text" placeholder="请输入要设置的属性名" id="attrName" />
  <input type="text" placeholder="请输入要设置的属性值" id=