【HTML】Dom操作 | 易学教程

tips：

1.createTextNode()和innerHTML区别：前者不消化html标签，就纯文本；后者消化

js的括号问题

1. <div οnclick='myfun()'>c点我！</div>

nodeName、nodeValue、nodeType

节点：

var id_name=document.getElementById('div1')// 元素节点

var name=id_name.getAttribute('name'); // 属性节点

alert(id_name);//div1

alert(‘元素节点: ’+ id_name.nodeName+', '+ id_name. namenodeType+', '+ id_name.nodeValue);// 元素节点: div, ELEMENT_NODE, null

alert(‘属性节点: ’+ name.nodeName+', '+name.nodeType+', '+name.nodeValue);// 属性节点: name, ATTRIBUTE_NODE, myname

.innerHTML=''
更改css样式: div1.style.background='red';
创建新的元素（createElement();appendChild()）

var newnode=document.createElement('newnode') //创建一个元素节点
var newtextnode=document.createTextNode('i am new newnode')  //创建一个文本节点
newnode.appendChild(newtextnode)  //将文本节点添加到元素节点中去（可以用innerHTML更简单）
var father=document.getElementById('father_div')  //获取父节点
father.appendChild(newnode);  //将元素节点插入到父节点中

元素的一些方法：

1. 创建元素：createElement(); 尾插入子元素父亲.appendChild(新节点); 前插入：父亲.insertBefore(新节点 , 已存在子节点)

删除：removeChild();

2. 图片是否加载完毕

img.onlode=function(){}

被点击的元素：e.target / e.srcElement(ie)

事件的类型：e.type

获取标签名：e.tagName

节点属性：三个：parentNode、childNode(数组)、firstChild 以及 lastChild

来源：CSDN

作者：rosa5500

链接：https://blog.csdn.net/weixin_40189786/article/details/103323369

标签

dom