JS原生DOM操作总结

DOM的主要操作——增、删、改、查节点

(1) 查找节点

document.getElementById(‘div1‘)

document.getElementsByName(‘uname‘)

document.getElementsByTagName(‘span‘)

document.getElementsByClassName(‘alert‘)

document.querySelector(‘#div1‘)

document.querySelectorAll(‘.alert‘);

(2) 操作节点的属性   <a  href="" title="">

e.getAttribute(‘href‘)

e.setAttribute(‘href‘, ‘2.html‘)

e.href

自己试试：  a.href和a.getAttribute()的返回值有何不同？

(3) 操作节点的样式

e.style.color

(4) 操作节点的内容

e.innerHTML

e.textContent / innerText

(5) 操作节点的值

input.value

(6) 新建节点

var e = document.createElement(‘div‘)

parent.appendChild(e)

(7) 删除节点

parent.removeChild(e)

(8) 替换节点

parent.replaceChild(newChild, oldChild)

(9) 克隆节点

var copy = e.cloneNode()

常用DOM操作方法的问题

(1)方法名比较长，会增加文件体积

(2)有些操作比较繁琐，如删除、替换

(3)存在浏览器兼容性问题

时间： 2024-11-10 10:24:58

JS原生DOM操作总结的相关文章

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

JS的DOM操作及动画

JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model 找到元素:var a=document.getElementById("id") :就找到的元素放在变量中:                id选择器:document.getElementById("id"): 根据id找,最多找一个:                class选择器:document.getElementClassName(

JavaScript常用原生DOM操作

最近,自己在投简历,找工作,在忙碌的复习当中,希望把有用的知识分享出去,是自己的成长,也可以给别人帮助. 今天给大家分享一些常用的原生的JavaScript DOM 操作. OK,那开始吧,那就开始吧O(∩_∩)O~~ 一.查看浏览器视口尺?   window.innerWidth/window.innerHeight(IE8以及IE8以下不能用  (′д｀ )-彡  )        document.documentElement.clientHeight/document.document

【2017-3-29】js语法 DOM操作

(一)Js简单介绍 1. 进行数据运算   控制浏览器的一些功能   控制元素(属性,样式,内容) 2. Js的引用位置: 内联Js  -  可以仿放在html文件的任意位置,推荐放在html的外面,页面的最底部 外部Js  -  将Js代码写到一个以Js结尾的文件中去,在将这个文件引用到html文件中去 内嵌Js (二)Js内容 1.基本数据类型: 字符串     var a = 'aaaa';  --  单引号,双引号都可以   小数       var a = 1.2; 整数      

5月16日上课笔记-js中DOM操作

一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文本节点 nodeType 节点类型: 1:元素节点 3:文本节点 9:document节点 2:属性节点 firstChild(支持IE浏览器) || firstElementChild(支持谷歌浏览器) //获取第一个子节点 var fc = ulDom.firstElementChild ||

jQuery对象与JS原生dom对象之间的转换

jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作.另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换. 1.将jQuery转换为dom对象的方法 [index] 或者.get(index): a.$(“#form”)[index]

关于JS的DOM操作——重要实例的操作

1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1" /><br><br>        <input type="button" value="下一步" id="btn1" disabled="disabled" /> </b

理解js的DOM操作

1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动.document.documentElement     返回文档的根节点<html> document.body     <body> document.activeElement 返回当前文档中被击活的标签节点(ie) event.fromElement        返回鼠标移出的源节点(ie) event.toElement       返回鼠标移入的源节点(ie) event.srcElement 

JS中Dom操作的常用案例实现

本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .