DOM相关方法,属性整理
1、获取元素的方法
1根据id获取对象
document.getElementById('');
2根据标签名获取对象
document.getElementsByTagName('')
3根据类名获取元素对象
document.getElementsByClassName('')
4获取body元素
document.body
2、节点/元素相关方法
1获取子节点
var 子节点的伪数组=父亲.childNodes
2获取子元素
var 子元素的伪数组=父亲.children;
3获取属性节点
var idnode=ul.getAttributeNode('')
4获取下一个兄弟节点
var node=xxx.nextSibing;
5获取下一个兄弟元素
var ele = xxx.nextElemenetSibling
6获取上一个兄弟节点
var node= xxx.previousSibling;
7获取上一个兄弟元素
var ele = xxx.previousElementSibling
8追加子节点
father.appendChild(demo)
把一个节点放到父亲点内部的最后
9插入子节点
father.innertBefore()
10移除
father.removeChild()移除子节点
11克隆
var clone=demo.cloneNode(true);
deep:深度,一般传入true
12创建子元素
var ele = document.createElement()
13获取第一个子元素
var frist=xxx.fristElementChild;
var frist=xxx.children[0];
获取第一个子节点 fristChild
14获取最后一个子元素
var last=xxx.lastElementChild
var last=xxx.children[xxx.children.length-1];
获取最后一个子节点 lastChild
15获取父节点
var parent=xxx.parentNode;

3.元素属性
1.src属性 img标签图片的路径
2.innerText属性 双标签的内部文本
3.innerHTML属性 双标签的内部html textContent也是内部文本
4.className属性 样式
5.disable input标签禁用属性disable 取值true或者false
6.type 不同类型的input的标签
7.value 标签的value的值
8.selected 下拉菜单select某一项被选中 取值true或者false
9.checked checkbox的选中状态 checked 取值true或者false
10.自定义属性 ******
1. 获取 任何标签中的属性都可以获取
console.log(box.getAttribute("a"));//可以获取没有规定的属性
console.log(box.getAttribute("id"));//也可以获取有规定的属性
2. 设置 任何标签中的属性都可以设置
box.setAttribute("b", "2");//可以设置没有规定的属性
box.setAttribute("class", "cls");//可以设置有规定的属性
3. 移除 任何标签中的属性都可以移除
box.removeAttribute("a");
box.removeAttribute("class");

11.背景颜色document.body.style.backgroundColor='red'

12.宽高
box.style.box='200px';box.style.height='200px';
13.背景图片
box.style.backgroundImage='url(images/1.png)';
14.隐藏盒子
this.style.display='none';this.style.visibility='hidden'
15.变盒子的位置
this.style.left='10px';this.style.top='10px;'
16.改变盒子的层级
this.style.zIndex='10'
4.事件
1.点击事件
ele.onclick=function(){} 注意在事件中,要获取当前点击的元素对象都用this
2.鼠标悬浮,鼠标离开事件
悬浮ele.onmouseover=function(){}
离开ele.onmouseout=function({})
3.焦点事件
鼠标失去焦点 ele.onblur=function(){}
鼠标获取焦点 ele.onfocus=function(){}
4.键盘事件
键盘按下 ele.onkeydown=function (){}
键盘抬起 ele.onkeyup=function(){}
5.双击事件
ele.ondibclick=function(){}
5.字符串相关方法
1.字符串的替换方法 replace
xxx=xxx.replace(searchValue,replaceValue);
replace特点:只找第一个匹配的替换
2.字符串的搜索方法indexOf()
xxx.indexOf(searchString);
查找searchString在xxx的第一个索引位置
如果查找的到时不存在字符串-1
如果查找的是""0
3.删除左右空格trim()
txt.value.trim()删除字符串的左右空格

window.onload和$(function(){})
window.onload表示页面加载完了后包括dom和js,再执行函数里面的内容
$(function(){})表示加载完了后再执行函数里面的内容 dom结构加载完毕后
$(document).ready(function(){})

1.$(function(){})不会被覆盖,而window.onload会被覆盖,个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中,在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的,$(function(){})类似于原生js中的DOMContentLoaded事件,在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档的加载步骤

1.解析html结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码

4.执行$(functhion(){})对应的代码

5.加载图片等二进制资源

6.页面加载完成执行window.onload

DOM相关方法,属性整理的更多相关文章

  1. js dom element 属性整理(原创)

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

  2. DOM操作指令整理

    DOM操作指令整理: (1) 创建新节点: createDocumentFragment() 创建一个DOM片段 creatElement() 创建一个具体的元素 creatTextNode() 创建 ...

  3. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  5. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  6. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  7. DOM 节点属性

    DOM 节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeT ...

  8. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  9. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

随机推荐

  1. 并发编程——ConcurrentHashMap#transfer() 扩容逐行分析

    前言 ConcurrentHashMap 是并发中的重中之重,也是最常用的数据结果,之前的文章中,我们介绍了 putVal 方法.并发编程之 ConcurrentHashMap(JDK 1.8) pu ...

  2. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. Spring基础(3) : 静态工厂和实例工厂创建bean

    public class Factory { public static Person staticCreate(){ Person p = new Person(); p.name="st ...

  4. (微信小程序)一 : 初识微信小程序

    首先看过angularjs的同学们在看微信小程序的创始文件应该不算很陌生吧. 需要看的 先是文件目录 看完这个目录..得知 ( 一 )    pages   他存放于多个页面 如 index ,log ...

  5. log4j2配置文件log4j2.xml详解(转载)

    此博文转载自阿豪聊干货:https://www.cnblogs.com/hafiz/p/6170702.html 一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2. ...

  6. [日常] Go语言圣经--接口约定习题2

    练习 7.3: 为在gopl.io/ch4/treesort (§4.4)的*tree类型实现一个String方法去展示tree类型的值序列. package main import( "f ...

  7. 设计模式——适配器模式(type-c转3.5mm耳机口)

    本文首发于cdream的个人博客,点击获得更好的阅读体验! 欢迎转载,转载请注明出处. 本文简述适配器模式,考虑到java中没有多继承就只写了对象适配器模式,然后例子是怎么用转接口把3.5mm耳机插在 ...

  8. Java 强制类型转换

    java提高篇(十一)-----强制类型转换 在java中强制类型转换分为基本数据类型和引用数据类型两种,这里我们讨论的后者,也就是引用数据类型的强制类型转换. 在Java中由于继承和向上转型,子类可 ...

  9. Centos 7 安装后设置

    1.宽带连接 终端: nm-connection-editor 添加:DSL 另外一篇:Centos7宽带连接 2.输入法设置 设置-->区域和语言--> + -->搜索chines ...

  10. SpringBoot —— AOP注解式拦截与方法规则拦截

    AspectJ是一个面向切面的框架,它扩展了Java语言.AspectJ定义了AOP语法,所以它有一个专门的编译器用来生成遵守Java字节编码规范的Class文件. SpringBoot中AOP的使用 ...