Web前段——DOM

xiaoxiao2022-06-12  36

HTML DOM对象————方法属性

一些常用的HTML-DOM方法 getElementByID(id)-获取带有指定节点(元素)appendChild(node)-插入新的子节点(元素)removeChild(node)-删除子节点元素
一些常用的HTML-DOM属性 innerHTML - 节点(元素)的文本值parentNode -节点(元素)的父节点childNode - 节点(元素)的父节点attributes - 节点(元素)的属相节点
举例: <script> var pare=document.createElement("p");//创建一个新的<p>标签 var node=document.getElement.createTextNode("这是新的段落"); //新建一个内容 pare.appendChild(node);//把内容添加给p标签 //把p标签添加给id为div的标签 var element =document.getElementById("div"); element.appendChild(pare); </script>

一些DOM的对象方法

metheddescribegetElementById()返回带有指定元素的值getElementsByTagName返回包含带有指定标签名称的所有元素的节点列表(集合或者数组)appendChild()把新的子节点添加到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的节点之前插入新的子节点createAttribe()创建属性列表createElement()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()把指定属性设置灬修改指定的值
DOM访问元素节点 方法名作用getElementById()返回带有置顶ID的元素getElementByTagName通过返回带有制定标签名的所有元素getElementByClassName通过返回带有指定类名的元素

最后一个在IE 5,6,7,8中无效


DOM修改 修改一下内容 - 改变HTMl的内容 - 改变CSS的样式 - 改变HTMl属性 - 创建新的HTML元素 - 删除已有的HTML - 改变时间(处理程序) 修改内容的方法——innnerHTML属性 ```js document.getElementById("name").innerHTML="New text"; ``` 改变样式的几种方法 - 直接设置style属性 ```js document.getElementById("ID").style.height="100px" ``` 直接设置属性 document.getElementById("ID").setAttribute("height",100) 设置style的属性 document.getElementById("ID").setAttribute("style","height:100px !important"); 使用setProperty document.getElementById("ID").style.setProperty("height","100px","important"); 改变class document.getElementByID("ID').className="newClass"; 设置cssText document.style.cssText="height:100px !important"; 创建引入新的css样式文件 <link href="css1.css" rel="stylesheet" type="text/css" id="css"/> function changeStyle4() { var obj = document.getElementById("css"); obj.setAttribute("href","css2.css"); }
创建新的HTML元素 - appendChild(); ```js var para=document.createElement("p"); var node=document.createTextNode("new "); pare.appendChild(node); ``` - insertBefore() 吧新元素添加到父元素的任意位置 - removeChild 删除已有的HTML元素 知道父元素,删除其中的某个子元素 - replaceChild();替换html ```js var parent=document.getElementById("div"); var child=document.getElementById("p"); parent.removeChild(child); ```
时间中文描述onclick点击事件onload进入界面onunload离开页面事件onchange常用语输入字段的验证onmouseover鼠标指针移动到元素时触发onmouseout在鼠标离开元素时触发函数onmousedown鼠标被点击的触发事件onmouseup鼠标点击完成的触发事件
转载请注明原文地址: https://www.6miu.com/read-4932739.html

最新回复(0)