常用的 DOM 方法

HTML DOM 树

1、document属性和方法： document 的属性有 head，body 之类，方法有各种获取 element 的方法。

2、element的属性和方法： 属性比如 style，innerHTML 和固有属性，方法比如各种动态操作元素， 比如 createElement，还有操作属性的 set、get、remove、create 解 Attribute。

3、attribute 的属性和方法：有点包含在element 里面的感觉

问题

1、我们熟知 location 是 window 的属性或者说对象，那么 document 对象有 location 属性么？

解答：window 有 location 对象，document 同样有 location 对象。

2、如何获取一个html的文档声明？

解答：document.doctype; 可以知道文档声明，如果没有 return null; 这里是

3、一个有如下 文档声明的 html 文档，它的文档声明的名字是什么？

解答：html

4、如何获取一个 html 的 head 部分？

解答：document.head；很明显选取 head 节点.就是· 这段 。

5、如何获取一个 html 的 body 部分？

解答：document.body；选取 body 节点.

6、如何获取一个文档的文档声明的名字？

解答：document.doctype.name；知道文档声明的名字.

7、document 的 location 属性是来干嘛的？

解答：location 一般主要是用来获取地址。

8、如何获取一个文档当前的地址？

解答：document.location.href; 获取当前地址

9、给文档重新分配地址的三种方法是哪三种？

解答：分别是 location 的 assign 方法和 href 属性。

document.location.assign(http://www.baidu.com) 分配一个地址 document.location="http://www.baidu.com" document.location.href="http://www.baidu.com"

10、innerText 和 innerHTML 的区别是什么（两点区别）？

解答：一个是获取文本，一个是获取标签。 innerText是IE特有，innerHTML则是符合W3C协议的。

11、innerText 里面的标签还是标签么？

解答：不是，已经转义为了文本。

12、element 常用的几个属性是哪几个？

解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing

13、如何通过DOM2方法获取一个标签？

解答：var d=document.querySelector("#p1");

14、DOM2 获取一个标签的两个常见方法是哪两个？

解答：querySelector 和 querySelectorAll

15、querySelector 和 querySelectorAll 和区别是什么？

解答：前者获取一个，后者获取所有对应标签的。

16、如何在body中把 b 标签插入到 a 标签之前？

解答：document.body.insertBefore(b,a); 把b插在a前面

17、insertBefore 除了成为普通元素的方法，可否成为 body 的方法？

解答：肯定可以啊

18、在 body 中用 c 标签替换 b 标签怎么实现？

解答：document.body.replaceChild(c,b); //（new,old）

19、属性操作的四个方法是哪四个？

解答：set，get，create，remove，后面分别接 Attribute

20、DOM 0点击事件怎么写？

解答：a.onclick=function(){}

21、DOM2点击事件怎么写？

解答：btn.addEventListener("click",fun,false)

22、DOM2中主要操作事件的两个方法是哪两个？

解答：add 和 remove 接 EventListener

23、btn.addEventListener("click",fun,false) 中的第三个参数是什么意思？

解答：如果是 true 就是在事件捕获阶段调用，如果是 false 则是在事件冒泡阶段调用。

24、这样用 removeEventListener("click",function(){}) 有效果么？

解答：这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。

25、IE事件调用的方法是什么？

解答：IE用的是 attach 的方式，a.attachEvent("onclick",function(){}

DOM对象常用对象的方法和属性 HTML文档中的常用节点类型 常用的Document的方法 Element常用的属性和方法 Node常用的属性和方法 DOM对象的常用方法示例

DOCTYPE html>

 
  
  Z-one
 

  测试
  测试
  测试

以上面 code 为例子

1、document 对象

//可以知道文档声明，如果没有return null;这里是
document.doctype;

//知道文档声明的名字.
document.doctype.name

//很明显选取head节点.就是这段
document.head

//选取body节点.
document.body

2、location

我记得 location一般主要是用来获取地址。 常用方法：

//获取当前地址
document.location.href

//分配一个地址
document.location.assign(http://www.baidu.com)

外如果href 是获取当前地址，如果给他赋值，把一个地址给他，也能达到assign的效果；
document.location="http://www.baidu.com"

或者
document.location.href="http://www.baidu.com"

3、innerText，innerHTML

这二个放一起说，主要是都挺像的，这两个的作用都是往文档中写出内容。

但是区别主要是：

document.body.innerText("Z-ONE") 主要是写入一个纯文本内容，此时 并不是标签。

而是一个文本 "".(其实这样也显得 innerText 的安全性高一点)

document.body.innerHTML("z-one") 也是写入一个纯文本内容，但是不会将HTML标签进行转义。

另外 innerHTML 是符合 W3C 协议的，而 innerText 只适用于IE浏览器。

4、Element 元素

DOCTYPE html>



  
  Z-one



  测试
  测试
  测试

  
    //获取上面那个例子的p1元素.
    var a = document.getElementById("p1")

    // 获取该元素的id... "p1" (貌似就是通过p1找到的他- -)
    a.id

    //获取到节点的名字(就是标签名字) 这里是"p"
    a.nodeName

    //获取节点的class名字，这里因为关键字的原因，只能用className;
    a.className
    
    另外还有一些
    child//获取子元素  这里没有
    lastchild//最后一个子元素.
    firstchild//第一个子元素.
    nextSibling//下一个兄弟元素.
    previousSibing//上一个兄弟元素.
  

应用示例

DOCTYPE html>



  
  Z-one



  测试
  测试
  测试

  
    window.onload = function () {
      //用id获取第二个p标签的元素
      var a = document.getElementById("p2");
      a.style.color = "red";

      //用标签名字来获取第一个p标签;
      var b = document.getElementsByTagName("p")[0]//获取的是一个集合,
      b.style.fontSize = "30px";//这里font-size,会报错,就用fontSize;

      //用类名来获取第三个标签.
      var c = document.getElementsByClassName("p")[2]//和上面一个道理
      c.style.fontWeight = "bold";
      
      //通过DOM2的方法获取第1个标签;
      var d = document.querySelector("#p1");
      //如果是queryselectorAll() 就是获取一个集合,操作方式和上面类似。
      //这里是通过类名，如果是ID就用#p1 标签就用p,一般是获取第一个元素.这点和Tag和Class都不一样
      d.style.color = "green";
    }
  

5、Element 创建和添加元素

DOCTYPE html>



  
  创建元素


  window.onload = function () {
    var a = document.createElement("div");
    a.className = "p1"
    a.innerHTML = ("测试下");

    //添加到文档中
    document.body.appendChild(a);//这下子元素就写进去了

    //如果还要添加 可以照着上面来，我们现在就添加一个元素进去
    var b = document.createElement("div");
    b.innerHTML = "
测试第二弹
";

    //这次我们添加在上一个元素前面
    document.body.insertBefore(b, a);//把b插在a前面- -
    
    //这时候不想要b了，想替换掉，可以这么做!
    var c = document.createElement("div");
    c.innerHTML = "我就是来替换的";
    document.body.replaceChild(c, b);//（new,old）
  }

6、属性操作

DOCTYPE html>



  
  创建元素


  

  
    var a = document.getElementById("x1");
    a.getAttribute("id");//获取该阶段的属性：id
    a.setAttribute("id", "Z-one");//设置一个属性。
    a.removeAttribute("id")//删除ID节点
  

DOM 事件处理 DOM0级事件处理

DOCTYPE html>



  
  创建元素





var a=document.getElementById("a");
a.onclick=function(){
  console.log("测试一下");
}
//这样点击按钮就会在控制台输出测试一下

DOM2级事件处理程序

这里前面区别开来，就是我是你的升级版！。

出了这两个方法 addEventListener(); //添加 removeEventListener(); //去除

DOCTYPE html>


  
  创建元素






var fun = function () {
  console.log("测试一下");
}
var btn = document.querySelector("input");
btn.addEventListener("click", fun, false)
btn.removeEventListener("click", fun, false)
//如果是true 就是在事件捕获阶段调用，如果是false则是在事件冒泡阶段调用。
//另外如果这里要用removeEventListener("click",function(){})//这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。

创建DOM节点、添加DOM节点、设置节点属性

DOCTYPE html>


  
  核心DOM操作



//创建DOM节点
var div1 = document.createElement("div");
var txt1 = document.createTextNode("穿梭");

//添加DOM节点
div1.appendChild(txt1);
document.body.appendChild(div1);

//创建水平线节点
var hr1 = document.createElement("hr");

//水平线节点添加到body上
document.body.appendChild(hr1);

var marquee1 = document.createElement("marquee");
var img1 = document.createElement("img");

//设置节点属性
img1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20211025054554.png');
img1.setAttribute('width', '200px');
img1.setAttribute('height', '200px');

//图片节点添加到marquee节点上
marquee1.appendChild(img1);
document.body.appendChild(marquee1);

/*
HTML marquee 元素（） 用来插入一段滚动的文字。
  元素已经 过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。
*/

测试代码

DOCTYPE html>


  
  Document



  
    321321
  

  add_h3

  
  链接1
  链接2
  链接3
  链接4

  
  点我
  

  1
    javascript3
    jquery5
    html7
  

  我就是看你不爽，我就要删了你
  
  获取body
  111

  

  
  332
  测试上下兄弟
  添加跑马灯标签
  
  
  
  

  
    var ul_1_aa = document.getElementById('ul_1');
    var ul_1 = document.getElementById('ul_1').childNodes;
    console.log(ul_1.length+" - childNodes");
    // console.log(ul_1[0]);
    // console.log(ul_1_aa.firstChild);

    console.log(ul_1[6]);
    console.log(ul_1_aa.lastChild);
        // console.log(ul_1[1]);
        // console.log(ul_1[2]);
        // console.log(ul_1[3]);
        // console.log(ul_1[4]);
        // console.log(ul_1[5]);
        // console.log(ul_1[6]);
        // console.log(ul_1[0].nodeType);
  
  123


  //你知道dom操作是用js操作dom树的原理，并且知道几个核心函数，要用的时候不熟悉的函数直接去查文档
  //查文档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词
  /*常用函数*/
  //1、document.getElementById('div1');

  //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点
  //
1
2
3
 1,2,3的位置都是这样，1、3是儿子，2是孙子


  // var div1=document.getElementById('div1');
  //console.log(div1);
  // console.log(div1.nodeValue);


  //var innerHTML=div1.innerHTML;
  var body_1 = document.getElementsByTagName('body');
  var body1 = body_1[0];
  //div1.removeChild(Node);
  // console.log(div1);
  //console.log(innerHTML);
  //console.log(body_1);

  function testGetAttribute() {
    var a_1 = document.getElementById('a_1');
    var a_1_href = a_1.getAttribute('href');
    console.log(a_1_href);
    console.log(a_1_href.nodeValue + '   :a_1_href.nodeValue');
    a_1.setAttribute('a_id', '7865');
  }

  function getAElements() {
    var aa = document.getElementsByName('tag_name');
    console.log(aa.length);
    console.log(aa);
  }


  //1.现在的目标，给div增加一个h3，h3里面的文本内容是‘还我命来’，h3还有一个属性是‘huai_ren’，值是‘fry’
  function add_h3() {
    var div1 = document.getElementById('div1');
    var h3_1 = document.createElement("h3");
    var str1 = document.createTextNode('还我命来');
    h3_1.append(str1);
    h3_1.setAttribute('huai_ren', 'fry');
    div1.append(h3_1);
  }

  function add_marquee() {
    // var div1=document.getElementById('marquee_test');
    var body1 = document.getElementById('body');
    var marquee_1 = document.createElement("marquee");
    var img_1 = document.createElement("img");
    img_1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20201124032511.png');
    marquee_1.append(img_1);
    // div1.append(marquee_1);
    body1.append(marquee_1);
  }

  //目标：我们想在body里面删了ul标签
  function remove_child_test() {
    var body1 = document.getElementById('body');
    var ul_1 = document.getElementById('ul_1');
    body1.removeChild(ul_1);
  }

  //目标：获取 id为marquee_test标签的父节点
  function test_parentNode() {
    var marquee_test = document.getElementById('marquee_test');
    console.log(marquee_test.parentNode);
  }

  //目标：获取 id为marquee_test标签 的  上一个兄弟和下一个兄弟
  function test_sibling() {
    var marquee_test = document.getElementById('marquee_test');
    console.log(marquee_test.nextSibling);
  }

DOM中Event 对象使用

1、将 event 作为参数传递进来，然后就可以调用 event 对象的各种属性和方法了。

2、事件通常与函数结合使用，函数不会在事件发生前被执行！

之前：

1、包括页面事件和键盘鼠标等外设的事件，就是监听所有对它可能影响的操作

2、先记住四个，onclick，onblur，onchange，onfocus

3、如何使用 dom 中 event 对象？

解答：将event作为参数传递进来，然后就可以调用event对象的各种属性和方法了。

event.button;
event.clientX

4、如何判断哪个鼠标按钮被点击？

解答：event.button; event 事件的 button 属性。

5、如何判断光标的坐标是？

解答：event.clientX。dom 中 event 对象的 clientX 和 clientY 属性。

获取鼠标哪个键的点击

  function whichButton(event) {
    var btnNum = event.button;
    if (btnNum == 2) {
      alert("您点击了鼠标右键！")
    }
    else if (btnNum == 0) {
      alert("您点击了鼠标左键！")
    }
    else if (btnNum == 1) {
      alert("您点击了鼠标中键！");
    }
    else {
      alert("您点击了" + btnNum + "号键，我不能确定它的名称。");
    }
  }



  请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。

获取光标的坐标

  
    function show_coords(event) {
      x = event.clientX
      y = event.clientY
      alert("X 坐标: " + x + ", Y 坐标: " + y)
    }
  




  请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时...onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户点击某个对象时调用的事件句柄。ondblclick当用户双击某个对象时调用的事件句柄。onerror在加载文档或图像时发生错误。onfocus元素获得焦点。onkeydown某个键盘按键被按下。onkeypress某个键盘按键被按下并松开。onkeyup某个键盘按键被松开。onload一张页面或一幅图像完成加载。onmousedown鼠标按钮被按下。onmousemove鼠标被移动。onmouseout鼠标从某元素移开。onmouseover鼠标移到某元素之上。onmouseup鼠标按键被松开。onreset重置按钮被点击。onresize窗口或框架被重新调整大小。onselect文本被选中。onsubmit确认按钮被点击。onunload用户退出页面。 鼠标 / 键盘属性 属性描述altKey返回当事件被触发时，"ALT" 是否被按下。button返回当事件被触发时，哪个鼠标按钮被点击。clientX返回当事件被触发时，鼠标指针的水平坐标。clientY返回当事件被触发时，鼠标指针的垂直坐标。ctrlKey返回当事件被触发时，"CTRL" 键是否被按下。metaKey返回当事件被触发时，"meta" 键是否被按下。relatedTarget返回与事件的目标节点相关的节点。screenX返回当某个事件被触发时，鼠标指针的水平坐标。screenY返回当某个事件被触发时，鼠标指针的垂直坐标。shiftKey返回当事件被触发时，"SHIFT" 键是否被按下。 标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性描述bubbles返回布尔值，指示事件是否是起泡事件类型。cancelable返回布尔值，指示事件是否可拥可取消的默认动作。currentTarget返回其事件监听器触发该事件的元素。eventPhase返回事件传播的当前阶段。target返回触发此事件的元素（事件的目标节点）。timeStamp返回事件生成的日期和时间。type返回当前 Event 对象表示的事件的名称。 标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法描述initEvent()初始化新创建的 Event 对象的属性。preventDefault()通知浏览器不要执行与事件关联的默认动作。stopPropagation()不再派发事件。