原生js 的一些DOM/样式操作

写在前面的话:

  一直写的jquery,原生的不用……写篇东西帮助自己整理记忆一下吧 ,虽然都很基础啊……



1.js找dom对象,以及创建/删除 节点

 一贯的jquery操作:$(selector)

 原生的写法(列一些常用的):

document.getElementsByClassName(selector)
document.getElementsByTagName(selector)
document.getElementById(selector)document.querySelector(selector)      // 只会返回找到的第一个符合的domdocument.querySelectorAll(selector)    // 会返回符合的所有dom
document.createElement(‘节点名‘);      // 创造一个节点parentDom.appendChild(childNode);      // 父元素添加一个节点parentDom.removeChild(childNode);     // 删除一个节点,只能由其父元素删除

2.js 怎么操作 dom 的类?   详情参见: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

 一般的用法如下:

加类:   dom.classList.add(className);移除类: dom.classList.remove(className);替换类: dom.classList.replace(className1,className2);判断类: dom.classList.contains(className);    // 这个只能一次判断一个 类
……
例如:  document.getElementsByClassName(‘box‘)[0].classList.add(‘haha‘);例如:  document.getElementsByClassName(‘box‘)[0].classList.add(‘haha‘,‘hehe‘);例如:  document.getElementsByClassName(‘box‘)[0].classList.contains(‘ha‘);    // false

注: 这里写在 classList前边的dom要是一个具体的dom元素,而非数组,所以className找到的结果要记得加上 [序号]进行唯一化。

注: 兼容性:IE10以及以上支持,现代浏览器支持;

3. js如何操作style

dom.style.属性名 = 属性值;
//例如:
document.getElementsByClassName(‘box‘)[0].style.background = ‘red‘;

4.js 如何获取内存中的css样式

function getStyle(obj, attr){
    var cs = obj.currentStyle || window.getComputedStyle(obj, null);   // 兼容 IE8
    return cs[attr];
}
// 例子:
var a = document.getElementsByTagName(‘div‘)[0];
console.log(getStyle(a, ‘background-color‘));      // background: red;    结果: rgb(255, 0, 0)

注:所谓内存中的css样式,是元素正在起作用的那些css样式:

 如果没有明确 地给一个div宽度,只是由子元素撑开,那么在IE中得到的width,永远是auto;而在chrome,firefox中则是一个具体的宽度;

 如果是已经给了一个具体的宽度值,那么浏览器得到的都是这个具体宽度值;

5.js 如何获取元素的文本属性,表单元素的一些属性值

// 文本属性
dom.innerHTML
dom.innerText

// 表单元素的一些属性值
// html 代码
<input type="text" id="inputId" title="inputTitle" class="inputClass" value="inputValue">
// js 代码
var inputObj = document.getElementsByTagName(‘input‘)[0];

console.log(inputObj.type); // 获取 type 属性值
console.log(inputObj.id); // 获取 id 属性值
console.log(inputObj.title); // 获取 title 属性值
console.log(inputObj.class); // class 直接获取时获取不到的
console.log(inputObj.className); // 正确获取 class 的属性值
console.log(inputObj.value); // 获取 value 的属性值

// 或者是checkbox 的checked 属性也是 dom.checked 

6.js & 事件

 6.1 事件的写法:

// onload 页面加载完毕后执行的时间
window.onload = function(){
    alert(‘页面加载完成, onload 事件被触发!‘);
}

注:js 写各种方法时,这个需要在事件名称前面加上onxxx,而jquery直接是事件名。

  6.2 事件对象:

document.getElementsByTagName(‘div‘)[0].onclick = function(event){ // 这里用一个形参来接系统给的事件对象  var event = event || window.event;      // 兼容IE8
   console.log(event);
}

注: 时间对象中包含很多的信息,可以用来做一些操作的,比如点击位置,这个元素的位置啥的都有。

 6.3 事件委托:

document.getElementsByTagName(‘div‘)[0].onclick = function(event){  // 这里用一个形参来接系统给的事件对象
    var event = event || window.event;
    event.target = event.srcElement || event.target;                    // 兼容 IE8
    console.log(event.target)
}

7. Browser对象,W3Cschool上有详细的说明,http://www.w3school.com.cn/jsref/dom_obj_window.asp

8. 常用的一些距离的写法:

  我做了一个实验,页面包含一个div, 让浏览器出现水平以及竖直方向的滚动条,测量数据如下:

  

  注:不可能将所有浏览器都调到一个大小去量,所以数值主要是观测同一浏览器不同属性下的值之间的差异:

  

 从结果看来:

 1) innerWidth,innerHeight  各个浏览器得到的数值都是一样的,只是IE8不支持;高度指的是显示内容区的“屏幕”高度;

 2) document.documentElement.xx   各浏览器都支持,然而数值是不一样的,其中除了IE10,IE11之外,其他的浏览器都是不包含滚动条宽度的值;高度指的是显示内容区的“屏幕”高度;

 3)document.body.xx   各浏览器都支持,然而宽度数值是不一样的,其中除了IE10,IE11之外,其他的浏览器都是不包含滚动条宽度的值;高度一致,都表示内容的高度;

 4)IE8的滚动条宽度较其他浏览器多4px,21px;  IE10,IE11的滚动条体现不出来;IE9与Chrome,firefox的滚动条宽度为17px;

  

时间: 2024-10-10 23:11:56

原生js 的一些DOM/样式操作的相关文章

DOM样式操作

内部样式表 <style type="text/css"> body{margin:30;} p{color:#aaa;line-height: 20px;} </style> element.sheet.cssRules element.sheet.cssRules[1]   <--->         p{color:#aaa;line-height: 20px;}   //cssRules中的『第二条rule』 .style  <---&

原生js获取元素样式

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中

原生JavaScript常用的DOM操作

之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或者库好多都是公司内部自己构建的,所以说到头来还是要原生JavaScript,这里总结了一些原生js常用的dom操作函数. 一:节点关系 //元素的子元素都可以通过someNode下的childNodes对象来访问 var firstChild = someNode.firstChild; //获得第

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

原生js之道——原生js编写类选择器

一.类选择器的概念 类选择器,就是通过class属性获取节点.比如一个html结构中,有三个p标签都具有class="red"的属性,那么类选择器返回的就是这三个p标签. 在jquery中,我们可以很方便的通过$(".red")这种方式按照类获取节点.但是在原生的javascript中,有getElementById(按照id属性获取元素).getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法.因此,编写原生js实现类选择

defer和async(原生js学习)转

(1) 页面下载过程要干的事情 页面parse完毕----DOMContentLoaded(DOM树建立完毕)----onload(全部资源下完,图片,iframe,flash这些) 注意js脚本要下载并执行完毕,dom树才能出来,因为script标签也属dom的一部分,同时因为js也许有dom的操作,所以必须要等js脚本执行完毕,才能完成dom的构建. parse的过程则可理解为对文档全部扫一遍,知道要干什么,接下来才是整个DOM的构建过程.parse the markup and set t

原生js的一些研究和总结(1)

数据类型 基本类型值包括: undefined,null,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,它们的值保存在栈空间,我们通过按值来访问的. 引用类型包括:对象.数组.函数等. 对于引用类型的值,则必须在堆内存中为这个值分配空间.由于引用类型值的大小不固定(对象有很多属性和方法,而且还可以动态的添加属性和方法),因此不能把他们保存到栈内存中.但内存地址大小是固定的,因此可以将内存地址保存在栈内存中. 简而言之:栈内存中存放的是基本数据类型值,堆内存中

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一 查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(

原生js 样式的操作整理

内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle(obj,false)[attr]; }   下面是比较完善的, //参考地址 http://stylechen.com/getstyle2.html var getStyle = function( elem, style ){ //单位如果em或%的单位,getCo